Бегущая строка на 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.

24 Responses to “Бегущая строка на JavaScript своими руками”

  1. Finless says:

    А в каких случаях хорошо использовать иммитацию бегущей строки?! Просто интересно!

  2. Спасибо, воспользуюсь

  3. adrianoff says:

    Спасибо большое. Воспользуюсь. Только вот как это в typo3 интегрировать? ))

  4. Reall says:

    Не понял – куда текст прописывать? И возможно ли чередовать несколько фраз?

  5. Павел says:

    А тег не устраивает?

  6. Mihalytch says:

    Т.е. вы думаете, что если бы меня устраивал тег marquee то я стал бы усложнять себе жизнь?

  7. Александр says:

    А как сделать так, чтобы начало бегущей строки выбегало сразу за концом, недожидаясь пока вся фраза уйдёт за экран

  8. Mihalytch says:

    По идее нужно клонировать элемент с текстом (marquee_text) и прокручивать их с определенным интервалом. Скоро выйдет статья об обновленном скрипте бегущей строки, там расскажу более подробно.

  9. Demetriy says:

    Спасибо……ваш пример очень помог) и был использован на сайте

  10. Олег says:

    А как насчет того что
    “overflow: hidden (для того, чтобы “бегущий” текст скрывался за границами родительского блока).” не работает в IE, он (текст) не скрывается

  11. Ольга says:

    Если скрипт отдельным файлом. marquee_row.js

    Как его вызвать из хтмл?

    Если
    поставить в шапке, то не работает скрипт

  12. Ольга says:

    А вот не работает бегущая строка, если скрипт подключать из отдельного файла. Хотя alert срабатывает.
    не надо вносить изменения к код скрипта?

  13. Ольга says:

    пример работает.
    http://upload.com.ua/get/901683107/

    • Mihalytch says:

      Из js/marquee_row.js удалить вызов функции enableCrawLine (); (в самом конце файла).

      в index.html к тегу <body> добавить атрибут onload=”” с вызовом ф-и инициализирующей строку:

      <body onload=”enableCrawLine ();”>

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

  14. Ольга says:

    Спасибо большое, заработало !!! )))

  15. Прохожий says:

    В опере не работает

  16. Женя says:

    Отличный пример, строка очень плавно едет.
    Проблема: когда вставляеш ее в ячейку таблицы – в IE6 когда строка добегает до левой границы блока начинает бежать по новой сначала.

Leave a Reply




*