中奖消息循环提醒

1.html页面

<div class="activity">
<ul >
<li>M***6中奖10元话费</li>
<li>M***12中奖50元话费</li>
<li>M***5中奖10元话费</li>
<li>M***10中奖5元话费</li>
<li>M***7中奖10元话费</li>
<li>M***78中奖10元话费</li>
<li>M***65中奖10元话费</li>
<li>M***87中奖50元话费</li>
<li>M***5中奖10元话费</li>
<li>M***10中奖5元话费</li>
<li>M***7中奖10元话费</li>
<li>M***78中奖10元话费</li>
<li>M***65中奖10元话费</li>
</ul>

</div>

2.css页面

.activity ul{position: absolute;width: 100%;text-align: center;}
.activity li{padding: 5px;color: #ac641a;font-size: 13px;text-align: center;}

3.js代码

var ls_activity = $('.activity ul');
var z = 0;   //向上滚动top值
function up() { //向上滚动
ls_activity.animate({ //中奖结果
'top': (z - 23) + 'px'
}, 1500, 'linear', function () {
ls_activity.css({'top': '0'}).find("li:first").appendTo(ls_activity);
up();
});
}
up();

思路

-用一个div包裹住ul，并设置溢出外层div 的都隐藏（overflow为hidden）；

-设置他们为绝对定位，用top值来控制ul向上移动；    //也可以设置为相对定位

-每次向上移动一个li的高度后，将第一个li插入到列表最后端。

-这样就可以使记录不断向上移动，制造列表滚动的效果。

（PS：这里使用的是模拟数据，在真实应用场景中，可用Ajax获取后端真实数据再插入DOM中。）