想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个

页面代码

<div class=recordlist>

<ul class=tpl-rotate-recordlist style=margin-top: 0px;>

<li class=tpl-rotate-recordlist-item>

恭喜187****5204获得1000rbm

</li>

<li class=tpl-rotate-recordlist-item>

恭喜137****1372获得1000rbm

</li>

<li class=tpl-rotate-recordlist-item>

恭喜156****0276获得1000rbm

</li>

<li class=tpl-rotate-recordlist-item>

恭喜139****9856获得1000rbm

</li>

<li class=tpl-rotate-recordlist-item>

恭喜136****0580获得1000rbm

</li>

<li class=tpl-rotate-recordlist-item>

恭喜136****0580获得1000rbm

</li>

<li class=tpl-rotate-recordlist-item>

恭喜138****8118获得1000rbm

</li>

<li class=tpl-rotate-recordlist-item>

恭喜136****5555获得1000rbm

</li>

<li class=tpl-rotate-recordlist-item>

恭喜136****0580获得1000rbm

</li>

<li class=tpl-rotate-recordlist-item>

恭喜136****0580获得1000rbm

</li>

</ul>

</div>

js代码

/*自动轮换xuyw*/

var autoscroll = function(a) {

$(a).find(ul:first).animate( {

margintop : -20px

}, 500, function() {

$(this).css( {

margintop : 0px

}).find(li:first).appendto(this)

})

}

if ($(.recordlist ul li).length > 0) {

setinterval('autoscroll(.recordlist)', 2000)

} else {

$(.recordlist).hide()

}