Html5移动端获奖无缝滚动动画实现示例

ulObj.css("animation","ani 5s linear infinite"); //给ul添加css3动画
}
addKeyFrame();

三、zepto+transition实现

移动端的zepto没有animate函数，如果不用css3的属性，那如何用js去写？

var timer,top;
function roll(){
var ulObj = $("#roll").find("ul"),
length = $("#roll li").length,
liFirst = $("#roll").find("li:first");
liSec = liFirst.next();
ulObj.append(liFirst.clone()).append(liSec.clone()); //把第一个第二个都添加到<ul>标签中
clearInterval(timer);
timer = setInterval(function(){ //设置定时器
var top = ulObj.css("margin-top");
top = +top.slice(0,-2);
if(top != -(20 * length)){ //获取现在的高度如果没有到最后就上移
top -= 40;
ulObj.css({"-webkit-transition":"all 1s","transition":"all 1s","margin-top":top});
}else{ //如果到了最后就迅速到零
top = 0;
ulObj.css({"-webkit-transition":"none","transition":"none","margin-top":top});
setTimeout(function(){ //这里加一个延时器，也是要放在队列最后去执行，为了避免两个动画合并
top -= 40;
ulObj.css({"-webkit-transition":"all 1s","transition":"all 1s","margin-top":top});
},0)
}
},2000);
}
roll();

如果还有别的方法，下次我会不定期更新的。不过移动端的话这几个应该够用了。