jQuery melaksanakan tatal automatik senarai untuk memaparkan berita dalam loop_jquery

Berita (pengumuman, acara, gambar, dsb.) perlu dipaparkan dalam cara menatal bulat di kawasan kecil pada halaman, dan penatalan harus berhenti dan menggesa apabila tetikus melayang, dan penatalan harus diteruskan selepas pergi.

Rendering:

Inilah bahan kering

html:

Salin kod Kod adalah seperti berikut:

• aaaaaaaaaaaaaaaa


• bbbbbbbbbbbbbb


• cccccccccccccccc


• ddddddddddddddd


• eeeeeeeeeeeee


• fffffffffffffff


• gggggggggggggg

css:

Salin kod Kod adalah seperti berikut:

ui,li {
gaya senarai: tiada;
}
#berita{
ketinggian: 75px;
limpahan: tersembunyi;
}

Kuncinya ialah fail js:

Salin kod Kod adalah seperti berikut:

$(fungsi() {
var $this = $("#news");
var scrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}, fungsi() {
scrollTimer = setInterval(function() {
scrollNews($this);
}, 2000);
}).trigger("mouseleave");

fungsi tatalNews(obj) {
var $self = obj.find("ul");
var lineHeight = $self.find("li:first").height();
$self.animate({
"marginTop": -lineHeight "px"
}, 600, function() {
$self.css({
marginTop: 0
}).find("li:first").appendTo($self);
})
}
})

Perkara utama ialah memahami dan menggunakan hover, setInterval, clearInterval, kaedah animasi dan atribut marginTop (marginLeft, top, left, dll. Perlu diingat bahawa jika anda tidak menambah .trigger("mouseleave"), apabila halaman web dimulakan Senarai tidak akan menatal, dan appendTo boleh mengalihkan elemen secara langsung, itu sahaja.