想實現一個類似跑馬燈的效果,發現跑馬燈有空格.效果也不美觀,于是用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()

}