Эта JavaScript Код будет перемещать одну текстовую строку, содержащую любой текст, который вы выбираете, через горизонтальное пространство без перерывов. Это делается путем добавления копии текстовой строки в начало прокрутки, как только она исчезает из конца области выделения. Сценарий автоматически определяет, сколько копий контента необходимо создать, чтобы вы никогда не исчерпали текст в своем выделении.
Это включает в себя код из моих примеров, который добавляет два новых объекта mq, содержащих информацию о том, что отображать в этих двух областях. Вы можете удалить один из них и изменить другой, чтобы отобразить один непрерывный выделенный фрагмент на своей странице или повторить эти утверждения, чтобы добавить еще больше выделенных областей. Функция mqRotate должна вызываться с передачей mqr после определения границ, поскольку она будет обрабатывать повороты.
// Непрерывный текст Marquee
// авторское право 30 сентября 2009 года Стивен Чепмен
// http://javascript.about.com
// разрешено использовать этот Javascript на вашей веб-странице
// при условии, что весь код ниже в этом скрипте (включая эти
// комментарии) используется без изменений
function objWidth (obj) {if (obj.offsetWidth) return obj.offsetWidth;
if (obj.clip) возвращает obj.clip.width; return 0;} var mqr = []; функция
mq (id) {this.mqo = document.getElementById (id); var wid =
objWidth (this.mqo.getElementsByTagName ('span') [0]) + 5; var fulwid =
objWidth (this.mqo); var txt =
this.mqo.getElementsByTagName ( 'оболочка') [0] .innerHTML; this.mqo.innerHTML
= ''; var heit = this.mqo.style.height; this.mqo.onmouseout = функция ()
{mqRotate (mqr);}; this.mqo.onmouseover = функция ()
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw =
Math.ceil (fulwid / wid) +1; для (var i = 0; i <
maxw; я ++) {this.mqo.ary [I] = document.createElement ( 'DIV');
this.mqo.ary [i] .innerHTML = txt; this.mqo.ary [i] .style.position =
«Абсолютный»; this.mqo.ary [i] .style.left = (wid * i) + 'px';
this.mqo.ary [i] .style.width = wid + 'px'; this.mqo.ary [i] .style.height =
Хейт; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
function mqRotate (mqr) {if (! mqr) return; для (var j = mqr.length - 1; J
> -1; j--) {maxa = mqr [j] .ary.length; for (var i = 0; imqr [j] .ary [i] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
mqr [J] .ary [0] .style; if (parseInt (y.left, 10) + parseInt (y.width, 10) <0)
{var z = mqr [j] .ary.shift (); z.style.left = (parseInt (z.style.left) +
parseInt (z.style.width) * maxa) + 'px'; mqr [j] .ary.push (z);}}
mqr [0] .TO = setTimeout ('mqRotate (mqr)', 10);}
Фактический текстовый контент для выделенной области идет внутри div в теге span. Ширина тега span - это то, что будет использоваться в качестве ширины каждой итерации содержимого в выделенном поле (плюс 5 пикселей только для разнесения их друг от друга).
Наконец, убедитесь, что ваш код JavaScript для добавления объекта mq после загрузки страницы содержит правильные значения.
Чтобы добавить дополнительные выделенные области, вы можете настроить дополнительные элементы div в HTML, предоставляя каждому свое текстовое содержимое внутри диапазона; установить дополнительные классы, если вы хотите по-разному стилизовать маркеры; и добавьте столько новых операторов mq (), сколько у вас есть выделений. Убедитесь, что вызов mqRotate () следует за ними, чтобы управлять для нас метками.