Повторение в бегущей строке
Помогите, люди.
В скрипте когда уходит первый блок, за ним идет второй, и т.п. Есть проблема: нужно чтобы за первым блоком шел второй за вторым третий за третьим первый. СЛИТНО. т.е. вот примеры: Сейчас: Cтрока №1 Cтрока №1 Cтрока №1 Надо: Cтрока №1 Cтрока №1 Cтрока №1 Cтрока №2 Cтрока №2 Cтрока №2 Cтрока №N Cтрока №N Cтрока №N Cтрока №1 Cтрока №1 Cтрока №1... Код:
<html> |
<html> <head> <style> #scroll { width: 50%; position: relative; overflow: hidden; height: 20px; background-color: #f0f0f0; } #scroll .subtitle { position: absolute; top: 0; visibility: hidden; white-space: nowrap; } </style> <script> function scroll(id, speed, step) { // Настройки скорости по умолчанию: var speed = speed || 20; // Задержка в мс var step = step || 1; // Перемещение в пикселах // Берем элемент, внутри которого будет скроллится контент. var element = document.getElementById(id); // Берем всех "детей" элемента (они и будут двигаться): var children = element.childNodes; // Переберём всех "детей" в массив, без пробелов (nodeType = 3) var childrenArray = []; for (var i = 0, l = children.length; i < l; i++) { if (children[i].nodeType != 3) { // Сдвинем их на начальную позицию: children[i].style.left = element.offsetWidth; childrenArray.push(children[i]); } } // Определяем локальное замыкание для интервала: var moveText = function() { // Объявим локально только те переменные, с которыми будет работа: var steps = step, container = element, scrolling = childrenArray, current = 0, currentWidth = element.offsetWidth; // Инициализируем первый элемент: scrolling[current].style.left = currentWidth; scrolling[current].style.visibility = "visible"; return function() { // Если изменился размер контейнера: if (container.offsetWidth != currentWidth) { // Высчитываем разность: var delta = parseInt(currentWidth) - parseInt(container.offsetWidth); currentWidth = container.offsetWidth; // Сдвигаем элемент на это значение: scrolling[current].style.left = parseInt(scrolling[current].style.left) - delta; } // Если текущий элемент уже за левой границей: if ((Math.abs(scrolling[current].offsetLeft) >= scrolling[current].offsetWidth) && scrolling[current].offsetLeft < 0) { // Переходим к следующему элементу, а этот прячем: scrolling[current].style.visibility = "hidden"; // Переходим к следующему: current++; // Если элементы кончились - начинаем заново if (current >= scrolling.length) current = 0; // Показываем элемент scrolling[current].style.left = parseInt(currentWidth); scrolling[current].style.visibility = "visible"; } else { // Просто двигаем элемент, ни о чем не задумываясь. scrolling[current].style.left = parseInt(scrolling[current].style.left) - steps; } } }(); var interval = setInterval(moveText, speed); // Устанавливаем событие на элемент (остановка скроллинга) element.onmouseover = function() { interval = clearInterval(interval); } element.onmouseout = function() { interval = setInterval(moveText, speed); } } </script> </head> <body onload="scroll('scroll')"> <div id="scroll"> <span class="subtitle"> Cтрока №1 <a href="#">Cтрока №1</a> Cтрока №1 Cтрока №2 Cтрока №2 Cтрока №2 Cтрока №N Cтрока №N Cтрока №N </span> </div> </body> </html> |
Дак блин хитрые. А когда закончится то что? Мне не нужно пустое место после блока текста.
P.S.: У меня там бегут баннеры |
какое пустое место?
|
После прохода первого span идет второй... но только после того как тот уйдет полностью за край... мне же нужно чтобы второй шел сразу за первым. третий за вторым и первый за третьим и т.п.
Сам программер но с жава не дружу |
Цитата:
тогда тебе нужно либо в html, либо перед стартом скрипта продублировать содержимое span'а (может даже больше 2х раз, зависит от соотношения размеров контейнера и содержимого), а когда левая копия заходит за левую границу - перемещать содержимое в начало контейнера (.style.left = '0px') несколько span'ов тебе не нужно, т.е. за основу можешь брать вариант Gvozd :yes: |
Тогда получается большая нагрузка на сеть, т.к. объем (ширина дива) процентная. И порой придется пихать туда по 10-15 копий...
|
фактически тебе нужно добваить в конец "экран" текста, т.е. по размеру ширины контейнера
p.s. а при чем тут нагрузка на сеть непонятно, ты что ajax-ом копии будешь добавлять, несмотря на то, что копировать можно из уже загруженного документа |
Часовой пояс GMT +3, время: 17:43. |