Показать сообщение отдельно
  #2 (permalink)  
Старый 22.05.2009, 12:31
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 03.04.2008
Сообщений: 6,234

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