Създайте JavaScript текстова маркировка

Това JavaScript код ще премести един текстов низ, който съдържа всеки избран от вас текст чрез хоризонтално пространство за маркировка без прекъсвания. Това прави, като добави копие на текстовия низ в началото на превъртането, веднага щом изчезне от края на пространството за маркиране. Сценарият автоматично изчислява колко копия от съдържанието, което трябва да създаде, за да гарантира, че никога няма да изтече текста във вашата маркировка.

Това включва кода от моите примери, който добавя два нови mq обекта, съдържащи информация за това какво да се показва в тези две маркировки. Можете да изтриете един от тях и да промените другия, за да покажете един непрекъснат макет на страницата си или да повторите тези изявления, за да добавите още повече маркировки. Функцията mqRotate трябва да бъде наречена преминаваща mqr, след като маркировките са дефинирани, така че да се справят с въртенията.

// Непрекъснат текст на текста
// авторски права 30 септември 2009 г. от Стивън Чапман
// http://javascript.about.com

instagram viewer

// е разрешено използването на този Javascript на вашата уеб страница
// при условие, че целият код по-долу в този скрипт (включително и този)
// коментари) се използва без промяна
функция objWidth (obj) {if (obj.offsetWidth) връща obj.offsetWidth;
ако (obj.clip) върне obj.clip.width; връщане 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 [Ь] = 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 =
Heit; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
функция mqRotate (mqr) {if (! mqr) връщане; за (var j = mqr.length - 1; к
> -1; j--) {maxa = mqr [j] .ary.length; за (var i = 0; imqr [j] .ary [i] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
mqr [й] .ary [0] .style; ако (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 таг. Ширината на маркера на педя е това, което ще се използва като ширина на всяка итерация на съдържанието в маркера (плюс 5 пиксела, само за да ги раздалечите един от друг).

И накрая, уверете се, че вашият JavaScript код за добавяне на mq обект след зареждането на страницата съдържа правилните стойности.

За да добавите допълнителни маркировки, можете да настроите допълнителни знаци в HTML, като всеки отделен текст съдържа вътре в педя; създайте допълнителни класове, ако искате да стилизирате различно маркетите; и добавете толкова нови mq () изрази, колкото имате маркировки. Уверете се, че повикването mqRotate () следва тях, за да управлява маркерите за нас.