0

我绘制了一个“交互式时间线”界面，您可以在 Safari 中在 iPad 上播放，这里：

www.insightdigital.org/touch

当您在屏幕上向左<->向右点击或滑动时，您将看到显示的图像根据您触摸的 pageX 值发生变化。简单的代码只是查找您触摸的 x 轴位置并从预渲染序列中调用图像。自然，在上述情况下，代码必须从网络（而不是实际情况下从 iPad 磁盘）获取帧，因此播放会有点卡顿，直到所有图像都被缓存。缓存后，播放流畅。

  1. 在第一次加载（或刷新）时，演示就像我想要的那样工作——只要你保持“touchmove”在游戏中。一旦您结束第一次触摸并尝试使用新的触摸笔划从左到右恢复擦洗，播放就会中断。您仍然可以点击屏幕：“touchstart”呼叫正在运行。但不是“touchmove”，直到您刷新或重新启动。参考下面的代码，你能看到我犯的一个或多个愚蠢的错误吗？

欢迎对问题提出任何其他意见或方法。

对于那些熟悉 EO Wilson 使用 iBooks Author 构建的“地球上的生命”的人来说，有几个这样的“交互式时间线”可以播放渲染的帧序列。

代码如下：

jquery.swipe-events.js 改编自：http: //jgestures.codeplex.com/

(function($) {
  $.fn.swipeEvents = function() {
    return this.each(function() {

      var startX,
      startY,
      $this = $(this);

      $this.bind('touchstart', touchstart);

     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();

     // preload
     for(i=20; i<=80; i++)
     {
      var prefix = "scaled/SHOT_C2 ";
      var currentFrame = pad(i,3);
      var path = prefix+currentFrame+".jpg";
      images[i]=path;
      imageObj.src=images[i];
     }

      function touchstart(event) {
    var touches = event.originalEvent.touches;
    if (touches) {
      startX = touches[0].pageX;
      startY = touches[0].pageY;
      $this.trigger("tap");

      $this.bind('touchmove', touchmove);

      $("#swipebox").image(images[parseInt(20+startX/20)],function(){
        // alert("image loaded");
      });

    }
    event.preventDefault();
      }  

      function touchmove(event) {
    var touches = event.originalEvent.touches;
    if (touches) {
      startX = touches[0].pageX;
      startY = touches[0].pageY;
      $this.trigger("tap");

      $("#swipebox").image(images[parseInt(20+startX/20)],function(){
        // alert("image loaded");
      });

    }
    event.preventDefault();
      }

    });
  };

$.fn.image = function(src, f){ 
  return this.each(function(){ 
    var i = new Image(); 
    i.src = src; 
    i.onload = f; 
    this.appendChild(i);
  }); 
}

function pad(number, length) {
    var str = '' + number;
    while (str.length < length) {
    str = '0' + str;
    }
    return str;
}

})(jQuery);

索引.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/main.css" rel="stylesheet">
  </head>
  <body>
    <div id=page>
      <div id=swipebox>
      </div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.swipe-events.js"></script>
    <script>
      $(function(){
        $('#swipebox')
          .swipeEvents()
          .bind("tap",  function(){ $('#swipebox').html(""); })
      });
    </script>
  </body>
</html>
4

0 回答 0