今儿分享一个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>
|