Форум

DSL88 · #1 (**permalink**) 22.05.2009, 13:26

Помогите, люди.
В скрипте когда уходит первый блок, за ним идет второй, и т.п.
Есть проблема: нужно чтобы за первым блоком шел второй за вторым третий за третьим первый. СЛИТНО. т.е. вот примеры:
Сейчас:
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>
<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
        </span>
 
        <span class="subtitle">
        Cтрока №2 Cтрока №2 Cтрока №2
        </span>
 
        <span class="subtitle">
        Cтрока №N Cтрока №N Cтрока №N
        </span>
    </div>
</body>
</html>

Gvozd · #2 (**permalink**) 22.05.2009, 13:31

<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>

DSL88 · #3 (**permalink**) 22.05.2009, 13:34

Дак блин хитрые. А когда закончится то что? Мне не нужно пустое место после блока текста.
P.S.: У меня там бегут баннеры

x-yuri · #4 (**permalink**) 22.05.2009, 20:29

какое пустое место?

DSL88 · #5 (**permalink**) 23.05.2009, 12:57

После прохода первого span идет второй... но только после того как тот уйдет полностью за край... мне же нужно чтобы второй шел сразу за первым. третий за вторым и первый за третьим и т.п.

Сам программер но с жава не дружу

x-yuri · #6 (**permalink**) 23.05.2009, 19:58

Цитата:

Сам программер но с жава не дружу

а прийдется

тогда тебе нужно либо в html, либо перед стартом скрипта продублировать содержимое span'а (может даже больше 2х раз, зависит от соотношения размеров контейнера и содержимого), а когда левая копия заходит за левую границу - перемещать содержимое в начало контейнера (.style.left = '0px')

несколько span'ов тебе не нужно, т.е. за основу можешь брать вариант Gvozd

DSL88 · #7 (**permalink**) 24.05.2009, 14:26

Тогда получается большая нагрузка на сеть, т.к. объем (ширина дива) процентная. И порой придется пихать туда по 10-15 копий...

x-yuri · #8 (**permalink**) 24.05.2009, 23:24

фактически тебе нужно добваить в конец "экран" текста, т.е. по размеру ширины контейнера
p.s. а при чем тут нагрузка на сеть непонятно, ты что ajax-ом копии будешь добавлять, несмотря на то, что копировать можно из уже загруженного документа

Форум

Справочник

Discord чат

Курсы javascript