jquery写的消息滚动条

先写出一个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"); //自动触发触摸事件