中奖消息循环提醒

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中。）