Bu JavaScript kodu, seçtiğiniz herhangi bir metni içeren tek bir metin dizesini, aralıksız yatay bir seçim alanı aracılığıyla taşır. Bunu, seçim çerçevesinin bittiği anda kaybolur kaymaz metin dizesinin bir kopyasını ekleyerek yapar. Komut dosyası, seçim çerçevenizdeki metnin asla bitmemesini sağlamak için içeriğin kaç kopyasının oluşturulması gerektiğini otomatik olarak işler.
Örneklerimdeki kod, bu iki markette görüntülenecek bilgileri içeren iki yeni mq nesnesi ekler. Bunlardan birini silebilir ve diğerini sayfanızda sürekli bir seçim çerçevesi görüntüleyecek şekilde değiştirebilir veya daha fazla seçim çerçevesi eklemek için bu ifadeleri tekrarlayabilirsiniz. Marqlar dönüşleri işleyecek şekilde tanımlandıktan sonra mqRotate işlevi geçen mqr olarak adlandırılmalıdır.
// Sürekli Metin Seçim Çerçevesi
// telif hakkı 30 Eylül 2009 Stephen Chapman tarafından
// http://javascript.about.com
// bu Javascript'i web sayfanızda kullanma izni verildi
// bu komut dosyasında aşağıdaki kodun tümü olması şartıyla (bunlar dahil)
// yorumlar) herhangi bir değişiklik yapılmadan kullanılır
işlev objWidth (obj) {if (obj.offsetWidth) return obj.offsetWidth;
(obj.clip) obj.clip.width değerini döndürürse; dönüş 0;} var mqr = []; fonksiyon
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 ( 'yayılma') [0] .innerHTML; this.mqo.innerHTML
= ''; var heit = this.mqo.style.height; this.mqo.onmouseout = fonksiyonu ()
{mqRotate (mqr);}; this.mqo.onmouseover = fonksiyonu ()
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw =
Math.ceil (fulwid / wid) +1; için (var i = 0; i <
maxw; i ++) {this.mqo.ary [i] = document.createElement ( 'div');
this.mqo.ary [i] .innerHTML = txt; this.mqo.ary [i] .style.position =
'Mutlak'; this.mqo.ary [i] .style.left = (genişlik * i) + 'piksel';
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);}
işlev mqRotate (mqr) {if (! mqr) döndürür; için (var j = mqr.length - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; için (var i = 0; imqr [j] .ary [i] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
mqr [j] .ary [0] .Style; eğer (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);}
Seçim çerçevesi için gerçek metin içeriği, span etiketindeki div içine girer. Span etiketinin genişliği, seçim çerçevesindeki içeriğin her yinelemesinin genişliği olarak kullanılacak olan şeydir (artı bunları birbirinden ayırmak için 5 piksel).
Son olarak, sayfa yüklendikten sonra mq nesnesini eklemek için JavaScript kodunuzun doğru değerleri içerdiğinden emin olun.
Ek seçim çerçevesi eklemek için, HTML'de her birine bir metin aralığı içinde kendi metin içeriğini vererek ek div'ler ayarlayabilirsiniz; seçim çerçevelerini farklı bir şekilde şekillendirmek istiyorsanız ek sınıflar oluşturun; ve seçim çerçeveleriniz kadar yeni mq () ifadesi ekleyin. Seçim çerçevelerini bizim için çalıştırmak için mqRotate () çağrısının bunları izlediğinden emin olun.