网上找了很多,万变不离其宗,写法核心都是一样的,在这里我给大家总结一下,可收藏备用。
html:
1
2
3
4
5
6
7
|
<
div
class
=
"scroll"
>
<
ul
class
=
"list"
>
<
li
><
a
href
=
"#"
target
=
"_blank"
>公告一 或 中奖者 甲</
a
></
li
>
<
li
><
a
href
=
"#"
target
=
"_blank"
>公告二 或 中奖者 乙</
a
></
li
>
<
li
><
a
href
=
"#"
target
=
"_blank"
>公告三 或 中奖者 丙</
a
></
li
>
</
ul
>
</
div
>
|
解析:适用于只有一行显示的公告类,以及展示中奖名单/抽奖结果等大框类,改变list高度即可
注意:list高度要和scroll高度一致,list不要有padding,否则会有虚闪,scroll一定要加
overflow:hidden;否则所有的li都会列出来。
方案一:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function
autoScroll(obj) {
$(obj).find(
".list"
).animate({
marginTop:
"-25px"
}, 1000,
function
() {
$(
this
).css({marginTop:
"0px"
}).find(
"li:first"
).appendTo(
this
);
})
}
var
timer = setInterval(
'autoScroll(".scroll")'
, 1000);
$(
function
() {
$(
".scroll"
).hover(
function
() {
clearInterval(timer);
},
function
() {
timer = setInterval(
'autoScroll(".scroll")'
, 1000);
})
})
|
方案二:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function
autoScroll(obj) {
//var _t;
function
scroll() {
$(obj).find(
".list"
).animate({
marginTop:
"-25px"
}, 500,
function
() {
$(
this
).css({marginTop:
"0px"
}).find(
"li:first"
).appendTo(
this
);
})
}
var
timer = setInterval(scroll, 2800);
$(obj).hover(
function
() {
clearInterval(_t);
},
function
() {
timer = setInterval(scroll, 2800);
}
)
}
$(
function
() {
autoScroll(
".scroll"
);
})
|
解析:两种方案实现的功能是一样的,都是通过改变margin-top的值,把第一个再添加到最后一个来实现的。第一种直接写出运行步骤,定时器可以定义在加载函数的外面,也可写在里面,但是以下的内容必须写在加载函数的里面,否则不能正常执行。
如果整体又定义为一个函数,则下面要在加载函数里调用一次函数,即可执行。
在hover事件中的回调函数,必须写timer=setInterval(),指定时器重新赋值给timer,直接写setInterval不起作用,如果写var timer=setInterval();则又重新定义了一个timer,同样不起作用。
本文转自 蓓蕾心晴 51CTO博客,原文链接:http://blog.51cto.com/beileixinqing/1873836,如需转载请自行联系原作者