Помогите с понимание кода ПОЖАЛУЙСТА.

[0931454574]

Товарищ подсказал код бегущей строки для изображений (за что целую золотые руки), но вот понять как он работает не дано. Прошу помочь, а заодно подсказать как можно еще добавить остановку скролинга при наведении мыши.Спасибо.

П.С. Если можно, то прокомментировать код
// комментарий
КОД

<style type="text/css">
div#marquee img{vertical-align:top}
div#marquee span{font-size:0}
div#marquee {
border:1px solid #000;
overflow:hidden;
white-space:nowrap;
height:70px;}
</style>
<div id="marquee">
  <span>
    <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
    <img src="http://javascript.ru/forum/image.php?u=12257&dateline=1304687820">
  </span>
</div>
 
<script type="text/javascript">
(function(step,speed){
var e=document.getElementById('marquee');
var e_width=e.offsetWidth;
var span=e.getElementsByTagName('span')[0];
var width=span.offsetWidth;
var margin=0;
while(e.scrollWidth<(e_width+width))e.appendChild(span.cloneNode(true))
step||(step=10);
speed||(speed=50);
(function(){
    margin+=width>=-margin?-step:width;
    span.style.marginLeft=margin+'px';
    setTimeout(arguments.callee,speed)
})()
})(5,50)
</script>

[Skipp]

а чего же товаришь не смог прокомментировать?
почитайте про тег marquee

[Aetae]

Дык я хотел было поначалу, но подумал что всё и так уж больно очевидно.))

[0931454574]

Aetae,
К сожалению даже прочтение значение всех свойств(точнее освежение в памяти) не помогло, так что прошу продолжить . спасибо.

Вот даже взять самое просто

(function(step,speed)

что то я не пойму что это за начало?

var e=document.getElementById('marquee');
var e_width=e.offsetWidth;
var span=e.getElementsByTagName('span')[0];
var width=span.offsetWidth;
var margin=0;

С этим все ясно, значение некоторых свойств обьектов

А вот тут пожалуйста подробнее
Конкретно вот это условие , e.scrollWidth<(e_width+width) - это я так понимаю идет сравнение пройденного пути к общей длине , а вот е.appendChild(span.cloneNode(true) уже вызвало зависание, то есть покаместь смещение относительно общей лоины меньше самой длины изображений мы их копируем(клонируем?)
while(e.scrollWidth<(e_width+width))e.appendChild(span.cloneNode(true))

Тут тоже не все ясно , что делает эта команда?
step||(step=10);
speed||(speed=50);

И при каких условиях запускается эта?
(function(){

А тут что происходит? и т.д.
    margin+=width>=-margin?-step:width;
    span.style.marginLeft=margin+'px';
    setTimeout(arguments.callee,speed)
})()
})(5,50)

[Matre]

/* Создаётся и тут же запускается анонимная функция.
   При этом переменные, объявленные внутри неё, не
   попадают в глобальную область видимости. Ну вот
   например у тебя есть где-то переменная span. И
   в этом скрипте она тоже есть. Чтобы они не конликтовали,
   и используется это замыкание.
*/
(function(step,speed){
var e=document.getElementById('marquee');
var e_width=e.offsetWidth;			// ширина marquee
var span=e.getElementsByTagName('span')[0];
var width=span.offsetWidth;			// ширина span
var margin=0;
/* Пока ширина marquee вместе с прокруткой меньше
   обычной ширины (т.е. marquee заполнен "не до предела"),
   добавляем в него копии span-ов. Когда-нибудь их добавится
   столько, что появится скролл и цикл прекратится.
*/
while(e.scrollWidth<(e_width+width))e.appendChild(span.cloneNode(true))
step||(step=10);
speed||(speed=50);
function start(){
/* Тут мы уменьшаем margin на step. Но наступает
   момент, когда margin уходит на большую, чем
   width, величину. Одним словом, |margin| > |width|
   Тогда мы ставим его в 0 и повторяем всё вновь.
*/
    timer = setInterval(function () {
    margin+=width>=-margin?-step:width;
    span.style.marginLeft=margin+'px';
    }, speed);
}
start();
e.onmouseover = function () {
	clearInterval(timer);
};
e.onmouseout = function () {
	start();
};
})(5,50)

[0931454574]

Matre,
Спасибо большое что ответилт. картина прояснилась , но остались вопросы:

step||(step=10);
speed||(speed=50);

Что это за строки? я не нахожу их применения ? и что это? "||" - или?

margin+=width>=-margin?-step:width;
    span.style.marginLeft=margin+'px';

В верхней строке получается что мы увеличиваем margin на значение width если оно больше или равно ???минус , вопрос , что то странно!!! Можно прокоментировать пожалуйста.

[Matre]

Что это за строки? я не нахожу их применения ? и что это? "||" - или?

Если значения step и speed не заданы, то задаётся значение по умолчанию (10 и 50 соответственно).

В верхней строке получается что мы увеличиваем margin на значение width если оно больше или равно ???минус , вопрос , что то странно!!! Можно прокоментировать пожалуйста.

Вот как эту строку можно перевести:

если |margin| < |width| то
	margin = margin - step
иначе
	margin = 0

[0931454574]

Matre,
Большое Вам спасибо, надеваю золотую корону на Вашу светлую голову, играет гимн, все радуются.

[Aetae]

Не совсем верно, margin не приравнивается нулю, тк шаг может быть любым и спан может уйти на n пикселей за экран.

Пример:
ширина спана(width) 200px
шаг(step) 12px
тогда margin может уйти на -204px
по этому делается margin+=width, что даёт -4px
т.о. не возникает скачков.

Впринципе чтоб наглядно понять как оно работает надо просто убрать заполнение строки копиями:

<style type="text/css">
div#marquee img{vertical-align:top}
div#marquee span{font-size:0}
div#marquee {
border:1px solid #000;
overflow:hidden;
white-space:nowrap;
height:70px;}
</style>
<div id="marquee">
  <span>
    <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
    <img src="http://javascript.ru/forum/image.php?u=12257&dateline=1304687820">
  </span>
</div>
  
<script type="text/javascript">
(function(step,speed){
var e=document.getElementById('marquee');
var e_width=e.offsetWidth;
var span=e.getElementsByTagName('span')[0];
var width=span.offsetWidth;
var margin=0;
//while(e.scrollWidth<(e_width+width))e.appendChild(span.cloneNode(true)) убираем заполнение
step||(step=10);
speed||(speed=50);
(function(){
    margin+=width>=-margin?-step:width;
    span.style.marginLeft=margin+'px';
    setTimeout(arguments.callee,speed)
})()
})(5,50)
</script>