Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.05.2011, 10:42
Человек
Отправить личное сообщение для 0931454574 Посмотреть профиль Найти все сообщения от 0931454574
 
Регистрация: 10.03.2011
Сообщений: 305

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

П.С. Если можно, то прокомментировать код
// комментарий
КОД
<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>
__________________
XYZ
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2011, 11:02
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

а чего же товаришь не смог прокомментировать?
почитайте про тег marquee
__________________
.
Ответить с цитированием
  #3 (permalink)  
Старый 18.05.2011, 16:18
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,511

Дык я хотел было поначалу, но подумал что всё и так уж больно очевидно.))
__________________
29375, 35
Ответить с цитированием
  #4 (permalink)  
Старый 18.05.2011, 17:27
Человек
Отправить личное сообщение для 0931454574 Посмотреть профиль Найти все сообщения от 0931454574
 
Регистрация: 10.03.2011
Сообщений: 305

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)
__________________
XYZ

Последний раз редактировалось 0931454574, 18.05.2011 в 17:32.
Ответить с цитированием
  #5 (permalink)  
Старый 18.05.2011, 18:03
Профессор
Отправить личное сообщение для Matre Посмотреть профиль Найти все сообщения от Matre
 
Регистрация: 07.01.2011
Сообщений: 582

/* Создаётся и тут же запускается анонимная функция.
   При этом переменные, объявленные внутри неё, не
   попадают в глобальную область видимости. Ну вот
   например у тебя есть где-то переменная 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)
Ответить с цитированием
  #6 (permalink)  
Старый 18.05.2011, 18:13
Человек
Отправить личное сообщение для 0931454574 Посмотреть профиль Найти все сообщения от 0931454574
 
Регистрация: 10.03.2011
Сообщений: 305

Matre,
Спасибо большое что ответилт. картина прояснилась , но остались вопросы:
step||(step=10);
speed||(speed=50);

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

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


В верхней строке получается что мы увеличиваем margin на значение width если оно больше или равно ???минус , вопрос , что то странно!!! Можно прокоментировать пожалуйста.
__________________
XYZ
Ответить с цитированием
  #7 (permalink)  
Старый 18.05.2011, 19:18
Профессор
Отправить личное сообщение для Matre Посмотреть профиль Найти все сообщения от Matre
 
Регистрация: 07.01.2011
Сообщений: 582

Цитата:
Что это за строки? я не нахожу их применения ? и что это? "||" - или?
Если значения step и speed не заданы, то задаётся значение по умолчанию (10 и 50 соответственно).

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

если |margin| < |width| то
	margin = margin - step
иначе
	margin = 0
Ответить с цитированием
  #8 (permalink)  
Старый 18.05.2011, 19:31
Человек
Отправить личное сообщение для 0931454574 Посмотреть профиль Найти все сообщения от 0931454574
 
Регистрация: 10.03.2011
Сообщений: 305

Matre,
Большое Вам спасибо, надеваю золотую корону на Вашу светлую голову, играет гимн, все радуются.
__________________
XYZ
Ответить с цитированием
  #9 (permalink)  
Старый 18.05.2011, 19:55
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,511

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

Последний раз редактировалось Aetae, 18.05.2011 в 20:04.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите , пожалуйста, вытащить текст из тега liana1979 Общие вопросы Javascript 2 15.02.2011 14:55
помогите пожалуйста с кодом, который отмечает область на картинке 500rublei Общие вопросы Javascript 1 04.04.2010 13:04
Помогите пожалуйста, очень срочно!!! PAMAC AJAX и COMET 1 20.10.2009 23:38
Помогите пожалуйста. Оптимизация кода. touch_the_sky Элементы интерфейса 21 18.06.2009 19:53
Помогите пожалуйста. Оптимизация кода. touch_the_sky Events/DOM/Window 0 17.06.2009 14:52