先写出一个div,把要滚动的消息都放里面
<
div
class
=
"scroll-box"
>
<
ul
>
<
li
><
i
class
=
"icon icon-volume-medium"
></
i
><
span
class
=
"margin-left-10"
>1
</
span
></
li
>
<li><i class="icon icon-volume-medium"></i><span class="margin-left-10">2</span></li>
<li><i class="icon icon-volume-medium"></i><span class="margin-left-10">3</span></li>
...
</
ul
>
</
div
>
滚动的方法
//滚动动画
function scrollList(
obj) {
//获得当前<li>的高度
var scrollHeight = $(
"ul li:first").height();
//滚动出一个<li>的高度
$(obj).
animate({marginTop:
"-25px"},
600,
function () {
//动画结束后,将当前<ul>marginTop置为初始值0状态,再将第一个<li>拼接到末尾。
$(this).css({marginTop:
0}).
find(
"li:first").appendTo(this);
})
}
//获得当前<ul>
var $uList = $(
".scroll-box ul");
var timer =
null;
//触摸清空定时器
$uList.hover(
function () {
clearInterval(timer);
},
function () {
//离开启动定时器
timer =
setInterval(
function(){
scrollList(
'.scroll-box ul')
},
3000);
}).trigger(
"mouseleave");
//自动触发触摸事件