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