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

Товарищ подсказал код бегущей строки для изображений (за что целую золотые руки), но вот понять как он работает не дано. Прошу помочь, а заодно подсказать как можно еще добавить остановку скролинга при наведении мыши.Спасибо.П.С. Если можно, то прокомментировать код // комментарий КОД
<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>
8 ответов

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


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


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)


/* Создаётся и тут же запускается анонимная функция.
 При этом переменные, объявленные внутри неё, не
 попадают в глобальную область видимости. Ну вот
 например у тебя есть где-то переменная 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)


Matre, Спасибо большое что ответилт. картина прояснилась , но остались вопросы:
step||(step=10);
speed||(speed=50);
Что это за строки? я не нахожу их применения ? и что это? "||" - или?
margin+=width>=-margin?-step:width;
 span.style.marginLeft=margin+'px';
В верхней строке получается что мы увеличиваем margin на значение width если оно больше или равно ???минус , вопрос , что то странно!!! Можно прокоментировать пожалуйста.


Что это за строки? я не нахожу их применения ? и что это? "||" - или?
Если значения step и speed не заданы, то задаётся значение по умолчанию (10 и 50 соответственно).
В верхней строке получается что мы увеличиваем margin на значение width если оно больше или равно ???минус , вопрос , что то странно!!! Можно прокоментировать пожалуйста.
Вот как эту строку можно перевести:
если |margin| < |width| то
	margin = margin - step
иначе
	margin = 0


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


Не совсем верно, 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>