cari

Rumah >hujung hadapan web >tutorial js >jQuery melaksanakan tatal automatik senarai untuk memaparkan berita dalam loop_jquery

jQuery melaksanakan tatal automatik senarai untuk memaparkan berita dalam loop_jquery

WBOY
WBOYasal
2016-05-16 16:38:541977semak imbas

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:

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.
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery memuatkan data secara tidak segerak dan menambah acara example_jqueryArtikel seterusnya：jQuery memuatkan data secara tidak segerak dan menambah acara example_jquery

Artikel berkaitan

Lihat lagi