三、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(); |
如果还有别的方法，下次我会不定期更新的。不过移动端的话这几个应该够用了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。
