最近遇到別人的一個需求,就是是類似中獎觀衆名單輪播的一個效果,會出現多次,需要寫通用的方法,學習到了簡單記錄下
<!-- 消息滾動輪播1 -->
<p class="title">最新報名客戶</p>
<div class="newsBox">
<img src="images/fire.png" height="200" width="200"/>
<div id="news" class="news">
<ul style="margin-top:0!important">
<li>
<a href="">陳**</a><a href="">157****9518</a><a href="">2天前</a>
</li>
<li>
<a href="">王**</a><a href="">151****3775</a><a href="">3天前</a>
</li>
<li>
<a href="">張**</a><a href="">135****7296</a><a href="">30分鐘前</a>
</li>
<li>
<a href="">林**</a><a href="">182****2433</a><a href="">1小時前</a>
</li>
<li>
<a href="">朱**</a><a href="">137****3554</a><a href="">2天前</a>
</li>
<li>
<a href="">於**</a><a href="">157****9518</a><a href="">3天前</a>
</li>
</ul>
</div>
</div>
<!-- 消息滾動輪播 2-->
<p class="title">中間觀衆</p>
<div class="newsBox">
<img src="images/fire.png" height="200" width="200"/>
<div id="scroll1" class="news">
<ul style="margin-top:0!important">
<li>
<a href="">陳**</a><a href="">157****9518</a><a href="">2天前</a>
</li>
<li>
<a href="">王**</a><a href="">151****3775</a><a href="">3天前</a>
</li>
<li>
<a href="">張**</a><a href="">135****7296</a><a href="">30分鐘前</a>
</li>
<li>
<a href="">林**</a><a href="">182****2433</a><a href="">1小時前</a>
</li>
<li>
<a href="">朱**</a><a href="">137****3554</a><a href="">2天前</a>
</li>
<li>
<a href="">於**</a><a href="">157****9518</a><a href="">3天前</a>
</li>
</ul>
</div>
</div>
/* 消息滾動輪播 */
function autoScroll(obj) {
$(obj).find('ul').animate({
marginTop: '-.60rem'
}, 1000, function () {
$(this).css({marginTop: "0px"});
//要對應到操作元素dom下的ul
var _li = $(obj).find("ul li");
var _clone =_li.first().clone();
_li.last().after(_clone);
_li.first().remove();
})
}
$(function () {
// setInterval('autoScroll("#news")', 2000);
setInterval(function () {
$(".news").each(function () {
// console.log($(this))
autoScroll($(this));
})
}, 2000)
})
數據是靜態的死數據。