Javascript.RU

 
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.05.2009, 13:26
Новичок на форуме
Отправить личное сообщение для DSL88 Посмотреть профиль Найти все сообщения от DSL88
 
Регистрация: 22.05.2009
Сообщений: 4

Повторение в бегущей строке
Помогите, люди.
В скрипте когда уходит первый блок, за ним идет второй, и т.п.
Есть проблема: нужно чтобы за первым блоком шел второй за вторым третий за третьим первый. СЛИТНО. т.е. вот примеры:
Сейчас:
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>
  #2 (permalink)  
Старый 22.05.2009, 13:31
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

<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>
  #3 (permalink)  
Старый 22.05.2009, 13:34
Новичок на форуме
Отправить личное сообщение для DSL88 Посмотреть профиль Найти все сообщения от DSL88
 
Регистрация: 22.05.2009
Сообщений: 4

Дак блин хитрые. А когда закончится то что? Мне не нужно пустое место после блока текста.
P.S.: У меня там бегут баннеры
  #4 (permalink)  
Старый 22.05.2009, 20:29
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

какое пустое место?
  #5 (permalink)  
Старый 23.05.2009, 12:57
Новичок на форуме
Отправить личное сообщение для DSL88 Посмотреть профиль Найти все сообщения от DSL88
 
Регистрация: 22.05.2009
Сообщений: 4

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

Сам программер но с жава не дружу
  #6 (permalink)  
Старый 23.05.2009, 19:58
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Цитата:
Сам программер но с жава не дружу
а прийдется

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

несколько span'ов тебе не нужно, т.е. за основу можешь брать вариант Gvozd
  #7 (permalink)  
Старый 24.05.2009, 14:26
Новичок на форуме
Отправить личное сообщение для DSL88 Посмотреть профиль Найти все сообщения от DSL88
 
Регистрация: 22.05.2009
Сообщений: 4

Тогда получается большая нагрузка на сеть, т.к. объем (ширина дива) процентная. И порой придется пихать туда по 10-15 копий...
  #8 (permalink)  
Старый 24.05.2009, 23:24
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поиск в строке другой подстроки средствами JS YAN Общие вопросы Javascript 13 23.07.2013 09:41
Изменение текста в бегущей строке yvarvara Элементы интерфейса 4 01.04.2009 18:24
текст в статусной строке HelpeR Общие вопросы Javascript 8 09.02.2009 13:28
? по бегущей строке glot Общие вопросы Javascript 2 27.10.2008 19:42
Текст в строке состояния в FF3 Bad Request Events/DOM/Window 2 17.09.2008 12:35