想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用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()
}
