Javascript 使用iPad上的touchmove移动图像（css3转换）

我有一张我想在iPad3上移动的图像

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

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

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性能的建议？

除了touchmove功能外，大部分的计算都是这样做的 并直接设置WebKittTransform，而无需通过非常长的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/<代码> <代码>溢出：隐藏< /代码>。这也会提高性能。

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

鼠标移动示例（不触摸，但相同，只是不需要isup检查）

---

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

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;
}

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