基于jQuery的上下无缝滚动应用(单行或多行)_jquery
May 16, 2016 pm 06:21 PM核心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需刷新才能执行]

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Petua dan kaedah untuk mencapai kesan tatal lancar dengan CSS

Cara menggunakan CSS untuk mencipta kesan karusel teks tatal yang lancar

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

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 paparan teks tatal yang lancar.

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

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