Artikel ini menjelaskan metode JS untuk mencapai pengguliran teks baris tunggal tanpa gangguan. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Beberapa hari yang lalu, saya menulis satu baris teks untuk menggulir ke atas terus menerus untuk seorang teman. Sekarang saya membagikannya dengan Webers yang saya butuhkan. Mari kita lihat kode HTML dan CSS terlebih dahulu:
CSS:
Salin kode sebagai berikut: .wrap {padding: 10px; border: 1px #ccc solid; Lebar: 500px; margin: 20px auto;}
.roll-wrap {height: 130px; overflow: tersembunyi;}
Html:
Salin Kode sebagai berikut: <VET>
<Div id = "roll-wrap">
<ul>
<li> JS Teks menggulir 1 </li>
<li> JS Teks menggulir 2 </li>
<li> JS Teks menggulir 3 </li>
<li> JS Teks menggulir 4 </li>
<li> JS Teks menggulir 5 </li>
<li> JS Teks menggulir 6 </li>
<li> JS Teks menggulir ke atas 7 </li>
</ul>
</div>
</div>
Prinsip efek animasi ini adalah untuk pertama -tama menggulir UL ke atas ketinggian LI, dan setelah menggulir, Li pertama di UL ditempatkan di akhir UL. Pada saat ini, Li kedua asli menjadi Li pertama di UL, dan kemudian ulangi tindakan di atas, dan ulangi pengguliran terus menerus.
Kode JS (JQuery):
Salin kode sebagai berikut: function scrolltxt () {
var controls = {},
nilai = {},
T1 = 200, /*waktu untuk memainkan animasi* /
T2 = 2000, /*Play Time Interval* /
si;
controls.rollwrap = $ ("#roll-wrap");
controls.rollwrapul = controls.rollwrap.children ();
controls.rollwraplis = controls.rollwrapul.children ();
values.linums = controls.rollwraplis.length;
value.liheight = controls.rollwraplis.eq (0) .height ();
values.ulheight = controls.rollwrap.height ();
this.init = function () {
autoplay ();
PAUSEPLAY ();
}
/*menggulir*/
function play () {
controls.rollwrapul.animate ({"margin-top": "-"+values.liheight}, t1, function () {
$ (ini) .css ("margin-top", "0"). anak-anak (). eq (0). lampai ($ (ini));
});
}
/*Gulir otomatis*/
function autoplay () {
/ *Gulir jika ketinggian dan tinggi semua tag Li lebih besar dari ketinggian .Roll-wrap */
if (values.liheight*values.linums> values.ulHeight) {
si = setInterval (function () {
bermain();
}, t2);
}
}
/*Menggulir jeda saat mouse lewat oleh ul*/
function pausePlay () {
controls.rollwrapul.on ({
"mouseenter": function () {
ClearInterval (SI);
},
"mouseleave": function () {
autoplay ();
}
});
}
}
scrolltxt baru (). init ();
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.