今儿分享一个jquery实现多行滚动效果。
我看一些论坛网站上面，公告处用的较多。
代码如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// 多行滚动(function($){$.fn.extend({Scroll:function(opt,callback){if(!opt) var opt={};var _this=this.eq(0).find("ul:first");var lineH=_this.find("li:first").height(),line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),speed=opt.speed?parseInt(opt.speed,10):1000, //卷动速度，数值越大，速度越慢（毫秒）timer=opt.timer?parseInt(opt.timer,10):5000; //滚动的时间间隔（毫秒）if(line==0) line=1;var upHeight=0-line*lineH;scrollUp=function(){_this.animate({marginTop:upHeight},speed,function(){for(i=1;i |
实例演示
代码如下
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<div id="scrollDiv"><ul><li>我是jquery多行滚动条一</li><li>我是jquery多行滚动条二</li><li>我是jquery多行滚动条三</li><li>我是jquery多行滚动条四</li><li>我是jquery多行滚动条五</li><li>我是jquery多行滚动条六</li><li>我是jquery多行滚动条七</li><li>我是jquery多行滚动条八</li></ul></div> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<script type="text/javascript" src="http:/(www.zzvips.com)/ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">// 多行滚动(function($){$.fn.extend({Scroll:function(opt,callback){if(!opt) var opt={};var _this=this.eq(0).find("ul:first");var lineH=_this.find("li:first").height(),line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),speed=opt.speed?parseInt(opt.speed,10):1000, //卷动速度，数值越大，速度越慢（毫秒）timer=opt.timer?parseInt(opt.timer,10):5000; //滚动的时间间隔（毫秒）if(line==0) line=1;var upHeight=0-line*lineH;scrollUp=function(){_this.animate({marginTop:upHeight},speed,function(){for(i=1;i<=line;i++){_this.find("li:first").appendTo(_this);}_this.css({marginTop:0});});}_this.hover(function(){clearInterval(timerID);},function(){timerID=setInterval("scrollUp()",timer);}).mouseout();}})})(jQuery);$(document).ready(function(){$("#scrollDiv").Scroll({line:4,speed:1000,timer:2000});});</script> |
