最模板 - 外贸网站建设,外贸网站模板

最模板

当前位置: 首页 > 建站教程 > html/css/js教程 >

jQuery实现上下无缝滚动(单行或多行)

时间:2014-06-29 01:07来源:未知 作者:最模板zuimoban 点击:
JS代码如下: 12345678910111213141516 jQuery ( function ( ) { var _wrap = jQuery ( ul.line ) ; //定义滚动区域 var _interval = 3000 ; //定义滚动间隙时间 var _moving ; //需要清除的动画 _wrap. hover ( function ( ) { cl

JS代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
jQuery(function(){ 
var _wrap=jQuery('ul.line');//定义滚动区域 
var _interval=3000;//定义滚动间隙时间 
var _moving;//需要清除的动画 
_wrap.hover(function(){ 
clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动 
},function(){ 
_moving=setInterval(function(){ 
var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的 
var _h=_field.height()+15;//取得每次滚动高度 
_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行 
_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动 
}) 
},_interval)//滚动间隔时间取决于_interval 
}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动 
});

HTML代码格式如下:

1
2
3
4
5
<ul class="line">
    <li></li>
    <li></li>
    ...
</ul>

(责任编辑:最模板)
------分隔线----------------------------
栏目列表
推荐内容