Question

我有一张图片，我想在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性能的建议吗？

Answer 1

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

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/

在iPad上使用touchmove移动图像（css3变换）

1 个答案: