源码:
var DataScroll = function(){
var list = null; //滚动的列表
var parent = null; //列表的父节点
var speed = null; //滚动的速度
var listHeight = null; //列表的高度
var self = this;
//初始化数据
this.init = function(obj)
{
//插入数据
$(obj['list']).parent().append( $(obj['list']).clone(true) );
$(function(){
list = obj['list'];
parent = $(obj['list']).parent();
speed = $(list).children().length;
listHeight = parseInt($(list).css('height'));
self.startAnimation();
});
},
//开始滚动
this.startAnimation = function()
{
var movelist = parent.children();
for(var i=0; i<movelist.length; i++)
{
var mlist = movelist[i];
$(mlist).attr('num', i);
mlist.style.webkitTransform = 'translateY(0px)';
//设置动画时间
mlist.style.webkitTransition = 'all '+(i==0? speed : speed * 2)+'s linear 0s';
//设置滚动位置
mlist.style.webkitTransform = 'translateY(-'+(i==0? listHeight : listHeight * 2)+'px)';
//滚动完成后的回调函数
mlist.addEventListener('webkitTransitionEnd', function(){
var num = parseInt($(this).attr('num'));
var selfM = this;
//停止动画时间
selfM.style.webkitTransition = 'all 0s linear 0s';
//设置位置为最下面
selfM.style.webkitTransform = 'translateY('+( num==0? listHeight : 0)+'px)';
//再次开启动画
setTimeout(function(){
selfM.style.webkitTransition = 'all '+speed*2+'s linear 0s';
selfM.style.webkitTransform = 'translateY(-'+(num==0? listHeight : listHeight * 2)+'px)';
},10);
});
}
}
}
调用方式:
new DataScroll().init({
list : '#msg' //滚动列表的id
});
demo下载地址 :http://download.csdn.net/detail/qq408896436/9716268