在 iPad 上使用 touchmove 移动图像（css3 转换）答案

【问题标题】：Move image around (css3 transform) with touchmove on iPad在 iPad 上使用 touchmove 移动图像（css3 转换）
【发布时间】：2013-12-16 20:13:26
【问题描述】：

我想在 iPad3 上移动一张图片

问题是它没有我希望的那么好，图像移动不流畅并且在手势后面移动。

我所拥有的如下（3MB base64 图像）

<img src="data:image/jpeg;base64,/9j/4AAQ....">

css：

img {
    transform: translate3d(0,0,0);
}

而 javascript 是

img.on('touchstart', function (e) {
     var diffX = e.pageX;
     var diffY = e.pageY;
     img.on('touchmove', function (e) {
         translateX  += e.pageX - diffX;   
         translateY += e.pageY - diffY; 

         img.css({'-webkit-transform': 'translate(' + translateX + 'px, ' + translateY + 'px)'});

         diffX = e.pageX;
         diffY = e.pageY;

     });             
     return false;
})
...

它在我的笔记本电脑上很好用，但在我的 iPad3 上却不行。我也尝试了 requestAnimationFrame，但在我停止移动之前什么都没有发生。有什么建议可以提高我 iPad 的性能吗？

【问题讨论】：

如果你想要性能，不要使用 jquery。

标签： javascript performance ipad css transform

【解决方案1】：

这完成了 touchmove 函数之外的大部分数学运算并直接设置 webkittransform 而不通过很长的 jquery css 函数。它还使用了 3d 过渡女巫没有正确设置，只需在 ios7 的 css 文件中添加 translate3d

var sx,sy,cx=0,cy=0,img=document.images[0];
img.addEventListener('touchstart',ts,false);
img.addEventListener('touchmove',tm,false);
img.addEventListener('touchend',te,false);
function ts(e){
 e.preventDefault();
 sx=e.pageX-cx;
 sy=e.pageY-cy;
}
function tm(e){
 this.style.webkitTransform='translate3d('+
 (e.pageX-sx)+'px,'+(e.pageY-sy)+'px,0)';
}
function te(e){
 cx=e.pageX-sx;
 cy=e.pageY-sy;
}

另一点是...即使您拥有 ipad 3，它也无法处理这样的大图像，因此请考虑将所有内容放在 div 和 overflow:hidden 中，这也会提高性能。

div{
 width:400px;/*try 100%*/
 height:400px;/*try 100%*/
 overflow:hidden;
}

鼠标移动示例（不是触摸，但它是一样的，只是你不需要 isup 检查）

http://jsfiddle.net/AtBUh/

【讨论】：

const pageY = (event as TouchEvent).touches[0].pageY;