Mihalytch personal blog

Все о высоких технологиях

Бегущая строка на JavaScript своими руками

Сегодня речь пойдет о создании простого скрипта для имитации эффекта бегущей строки. Для начала, придумаем, как это будет работать. По идее должен быть внешний контейнер, который определит размеры блока бегущей строки и ее положение в пространстве на странице, назовем его marquee_container. Также должен существовать блок, содержащий “бегущий” текст, наречем его – marquee_text.

Теперь должно быть все просто, мы задаем родительскому блоку фиксированную ширину, position: relative (для того, чтобы мы могли абсолютно позиционировать блок с текстом относительно текущего), overflow: hidden (для того, чтобы “бегущий” текст скрывался за границами родительского блока). Далее пишем скрипт, который отодвигает текст вправо на ширину родительского блока (теперь он не видим) и потом перемещает его влево с заданной скоростью, пока текст не скроется полностью. И повторяем это действие снова и снова =).
Для того, чтобы рассчитать момент, когда текст полностью скроется за левой границей, нам нужно узнать настоящую ширину блока с текстом. Если наш текстовый блок будет содержаться в marquee_container с заданной шириной, скрипт нам покажет ширину не больше нами заданной. Поэтому нам нужен еще один блок (marquee_subcontainer). Зададим ему ширину width:9999999px, и поместим в него текстовый блок. Теперь проблема с определением ширины решена.

Составим HTML код бегущей строки:

<div class="marquee-container" id="marquee_container">
    <div class="marquee-subcontainer" id="marquee_subcontainer">
        <div class="marquee-text" id="marquee_text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

Теперь составим таблицу CSS стилей в соответствии с нашими рассуждениями:

.marquee-container {
    position: relative; /* см. UPD 1 */
    border-right:1px dotted #d8cfc2;
    height:30px;
    width:200px;
    overflow: hidden;
    border:2px solid #f00;
    margin:0px auto;
}

.marquee-subcontainer {
    position: relative;
    width:9999999px;
    height:30px;
    margin:0px;
}

.marquee-text {
    position: absolute;
    margin: 0px;
    top:0px;
    left:0px;
    height:30px;
    font: bold 16px Arial Georgia;
    color:#000;
}

Когда все предварительные приготовления сделали, можно приступить к написанию JS кода.

// текущий сдвиг текста относительно левой границы блока бегущей строки
var craw_line_offset;

// функция инициализации бегущей строки
function enableCrawLine () {
    craw_line_offset = 0;

    // ширина текстового блока
    var craw_line_width = document.getElementById('marquee_text').offsetWidth;

    moveCrawLine (craw_line_width);
}

// функция пошагового сдвига
function moveCrawLine (w) {
    var lefttime;
    var container_width = document.getElementById('marquee_container').offsetWidth;
    // шаг (в пикселях), с которым будем перемещать текст
    var step = 1;
    // задержка между перемещениями на step пикселей
    var tdelay = 50;

    // ширина текстового блока
    w = parseInt(w);

    // если блок не "заехал" за левую границу
    if (craw_line_offset<(w+container_width)) {
        // сдвигаем блок на шаг влево
        craw_line_offset = craw_line_offset + step;
    } else {
        // иначе начинаем все с начала
        craw_line_offset = 0;
    }

    // изменяем позицию текстового блока
    document.getElementById('marquee_text').style.left = parseInt(container_width-craw_line_offset)+'px';

    // рекурсивно вызываем функцию сдвига с заданной задержкой
    setTimeout('moveCrawLine ('+w+');', tdelay);
}

// вызов инициализирующей функции
enableCrawLine ();

Теперь можем ознакомиться с рабочим примером.

UPD 1: В IE6 не корректно срабатывал overlow: hidden для родительского блока. Дочерний див с position:absolute отображался полностью, не зависимо от границ родительского блока. Оказалось нужно просто добавить свойство position: relative и блоку с overflow:hidden.

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

CAPTCHA Code *

Уведомлять меня о новых комментариях к этому посту по e-mail