Циклическая прокрутка содержимого в блоке div

Начнем с того, что снова возникла необходимость создать плавную автоматическую прокрутку текста в DIV`е и зациклить ее. Несложно догадаться, что для этого были выбраны следующие инструменты: CSS и JavaScript.

Для начала необходимо выделить в блок сам текст:

<div class="frame"><div id="animation_div"><div id="animate_div">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec vestibulum metus et nulla. Etiam at elit.
Nullam id mi eget lorem hendrerit viverra.
Fusce mi pede, tempor vitae, tristique tempus, molestie id, sem.
Cras mauris dolor, accumsan vitae, gravida a, blandit nec, massa.
<br />
Morbi metus libero, pellentesque sed, tristique et, ultrices quis, nunc.
Nunc interdum vulputate sem. Donec laoreet sagittis sapien.
In interdum. Nunc tempus purus faucibus lorem.
Proin fermentum tristique nisi. Proin sed nibh ut purus sollicitudin facilisis.
Fusce imperdiet tincidunt metus. Etiam tempor ante a eros.
Curabitur blandit erat a nisl. Sed elit.
</div></div></div>

Затем оформим соответствующим образом с помощью каскадных таблиц стилей (CSS):

div.frame {
padding: 0px;
margin: 0px;
width: 250px;     /* ширина блока */
border: 1px solid #fcc; /* рамка вокруг блока */
}

#animation_div {
position: relative;
padding: 0px;
margin: 0px;
height: 150px;    /* высота блока */
overflow: hidden;
}

#animate_div {
position: relative;
overflow: hidden;
margin:0px;
padding:3px;
/* стиль для текста внутри блока */
color: #000;
text-align: justify;
font: 10px Arial;
}

После блока в HTML коде необходимо вставить следующий JavaScript:

var oText = document.getElementById("animate_div");
var oContainer = document.getElementById("animation_div");

var nHeight = oText.offsetHeight;
var nPos = oContainer.offsetHeight;

var bScrolling = true;

function OnScrollerMouseOver() {
bScrolling = false;
}

function OnScrollerMouseOut()  {
bScrolling = true;
}

function OnTimer() {
if(!bScrolling)
return;

oText.style.top = nPos.toString() + "px";
if(--nPos &lt; -nHeight)
nPos = oContainer.offsetHeight;
}

OnTimer();

oContainer.onmouseover = OnScrollerMouseOver;
oContainer.onmouseout  = OnScrollerMouseOut;

window.setInterval(OnTimer, 50); /* задержка перед каждым сдвигом */

Суть работы скрипта заключается в том, что он через заданный интервал времени сдвигает текст на 1 пиксель, потому чем больше значение задержки, тем медленнее будет прокручиваться текст.

2 Responses to “Циклическая прокрутка содержимого в блоке div”

  1. Антон says:

    Попробовал на сайте.
    Не получилось запустить этот алгоритм.
    Возможно где-то упустил или что-то не дописано.

  2. Антон says:

    Стоит заменить строку
    oText.style.top = nPos.toString() + “px”;
    на
    oText.style.top = nPos + “px”;

    а также.
    if(–nPos < -nHeight)

    Тогда алгоритм станет рабочим.

Leave a Reply




*