虽然css3可以做出各种帧动画, addClass也可以作为控制.
但有的时候还是希望干干净净的用js
比如逐帧匀速的:
$page.backwards = function(page, total) { var timer = null; var num = total + 1; timer = setInterval(function() { if (num > 0) { num--; if (num === 0) { return; } $("." + page + "_frame" + num).show(); } }, 100); }; $page.forwards = function(page, total) { var timer = null; var num = 0; timer = setInterval(function() { if (num < total) { num++; if (num === total) { return; } $("." + page + "_frame" + num).hide(); } }, 100); };
setInterval用来设置播放速度,
如果要用drag驱动,
$page.curwards = function(page, total, cur) { $(".frame_area img").hide(); $("." + page + "_frame" + cur).show(); };
html里面只要把图片按照倒叙排放, 第一张压在最上面即可(absolute的自然层级)
如果是垂直的时间轴, 例如它的宽度是500:
$page.horiSlide = function(page, width, left, num, obj) { var x = obj.x - width; var end = 500 - width; total = end - left; if (x <= left) { x = left; } if (x >= end) { x = end; } $("." + page + " .hori_button img").css("left", x); $page.curwards("." + page, num, Math.ceil((x - left) / (total / num))); };
这里的page是区分不同容器, 如此计算可以直接把来自touchmove时间的坐标x分段显示num个帧。