Jadual Kandungan
单行应用
多行应用
Rumah hujung hadapan web tutorial js 基于jQuery的上下无缝滚动应用(单行或多行)_jquery

基于jQuery的上下无缝滚动应用(单行或多行)_jquery

May 16, 2016 pm 06:21 PM
Penatalan lancar

核心jQuery代码:

复制代码 代码如下:

$(function(){
var _wrap=$('ul.line');//定义滚动区域
var _interval=2000;//定义滚动间隙时间
var _moving;//需要清除的动画
_wrap.hover(function(){
clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
var _=_field.height();//取得每次滚动高度(多行滚动情况下,此变量不可置于开始处,否则会有间隔时长延时)
_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
},_interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
});

演示代码:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
Kenyataan Laman Web ini
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

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Petua dan kaedah untuk mencapai kesan tatal lancar dengan CSS Petua dan kaedah untuk mencapai kesan tatal lancar dengan CSS Oct 25, 2023 pm 12:31 PM

Petua dan kaedah untuk mencapai kesan tatal lancar dengan CSS

Cara menggunakan CSS untuk mencipta kesan karusel teks tatal yang lancar Cara menggunakan CSS untuk mencipta kesan karusel teks tatal yang lancar Oct 25, 2023 am 10:24 AM

Cara menggunakan CSS untuk mencipta kesan karusel teks tatal yang lancar

Bagaimana untuk mencapai berita tatal lancar melalui kaedah dan teknik CSS tulen Bagaimana untuk mencapai berita tatal lancar melalui kaedah dan teknik CSS tulen Oct 19, 2023 am 10:46 AM

Bagaimana untuk mencapai berita tatal lancar melalui kaedah dan teknik CSS tulen

Cara menggunakan Vue untuk mencapai kesan pengiklanan tatal yang lancar Cara menggunakan Vue untuk mencapai kesan pengiklanan tatal yang lancar Sep 21, 2023 am 11:24 AM

Cara menggunakan Vue untuk mencapai kesan pengiklanan tatal yang lancar

Cara menggunakan CSS untuk mencipta kesan karusel imej tatal lancar Cara menggunakan CSS untuk mencipta kesan karusel imej tatal lancar Oct 20, 2023 pm 03:37 PM

Cara menggunakan CSS untuk mencipta kesan karusel imej tatal lancar

Cara menggunakan CSS untuk mencipta kesan paparan teks tatal yang lancar. Cara menggunakan CSS untuk mencipta kesan paparan teks tatal yang lancar. Oct 21, 2023 am 09:10 AM

Cara menggunakan CSS untuk mencipta kesan paparan teks tatal yang lancar.

Cara menggunakan CSS untuk mencipta kesan bar paparan imej menatal yang lancar Cara menggunakan CSS untuk mencipta kesan bar paparan imej menatal yang lancar Oct 16, 2023 am 08:09 AM

Cara menggunakan CSS untuk mencipta kesan bar paparan imej menatal yang lancar

Bagaimana untuk mencapai pemberitahuan berita tatal lancar menggunakan HTML, CSS dan jQuery Bagaimana untuk mencapai pemberitahuan berita tatal lancar menggunakan HTML, CSS dan jQuery Oct 25, 2023 am 11:55 AM

Bagaimana untuk mencapai pemberitahuan berita tatal lancar menggunakan HTML, CSS dan jQuery

See all articles