Помогите с понимание кода ПОЖАЛУЙСТА.
Товарищ подсказал код бегущей строки для изображений (за что целую золотые руки), но вот понять как он работает не дано. Прошу помочь, а заодно подсказать как можно еще добавить остановку скролинга при наведении мыши.Спасибо.
П.С. Если можно, то прокомментировать код // комментарий КОД
<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>
|
а чего же товаришь не смог прокомментировать?
почитайте про тег 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 если оно больше или равно ???минус , вопрос , что то странно!!! Можно прокоментировать пожалуйста. |
Цитата:
Цитата:
если |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>
|
| Часовой пояс GMT +3, время: 16:42. |