Ini JavaScript kode akan memindahkan string teks tunggal yang berisi teks apa pun yang Anda pilih melalui ruang tenda horisontal tanpa putus. Ini dilakukan dengan menambahkan salinan string teks ke awal gulir segera setelah menghilang dari akhir ruang tenda. Script secara otomatis menentukan berapa banyak salinan konten yang perlu dibuat untuk memastikan bahwa Anda tidak pernah kehabisan teks di tenda Anda.
Ini termasuk kode dari contoh saya, yang menambahkan dua objek mq baru yang berisi informasi tentang apa yang harus ditampilkan dalam dua marque. Anda dapat menghapus salah satu dari itu dan mengubah yang lain untuk menampilkan satu tenda terus menerus pada halaman Anda atau ulangi pernyataan itu untuk menambahkan lebih banyak tenda. Fungsi mqRotate harus disebut lewat mqr setelah marque didefinisikan sebagai yang akan menangani rotasi.
// Marquee Teks Berkelanjutan
// hak cipta 30 September 2009 oleh Stephen Chapman
// http://javascript.about.com
// izin untuk menggunakan Javascript ini di halaman web Anda diberikan
// asalkan semua kode di bawah ini dalam skrip ini (termasuk ini
// komentar) digunakan tanpa perubahan apa pun
function objWidth (obj) {if (obj.offsetWidth) mengembalikan obj.offsetWidth;
if (obj.clip) mengembalikan obj.clip.width; return 0;} var mqr = []; fungsi
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 ('span') [0] .innerHTML; this.mqo.innerHTML
= ''; var heit = this.mqo.style.height; this.mqo.onmouseout = function ()
{mqRotate (mqr);}; this.mqo.onmouseover = function ()
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw =
Math.ceil (fulwid / wid) +1; untuk (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 = (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);}
function mqRotate (mqr) {if (! mqr) kembali; untuk (var j = mqr.length - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; untuk (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);}
Konten teks aktual untuk tenda masuk di dalam div dalam tag rentang. Lebar tag rentang adalah apa yang akan digunakan sebagai lebar setiap iterasi konten dalam tenda (ditambah 5 piksel hanya untuk memisahkan mereka satu sama lain).
Terakhir, pastikan bahwa kode JavaScript Anda untuk menambahkan objek mq setelah halaman dimuat berisi nilai yang benar.
Untuk menambahkan marque tambahan, Anda dapat mengatur divs tambahan dalam HTML, memberikan masing-masing konten teks sendiri di dalam rentang; mengatur kelas tambahan jika Anda ingin gaya marque berbeda; dan tambahkan pernyataan mq () baru sebanyak yang Anda miliki di tenda. Pastikan bahwa panggilan mqRotate () mengikuti mereka untuk mengoperasikan tenda bagi kita.