移動圖像周圍的iPad

（CSS3轉換）與touchmove我有我想走動我的iPad3移動圖像周圍的iPad

的問題是，是不會也如我希望的，圖像的圖像不平穩移動並且在手勢後面移動。

我有如下（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的性能？

來源

2013-12-16 Jeanluca Scaljeri

如果你想表現不使用jquery。 – cocco

這是touchmove函數之外的大部分數學操作，它直接設置webkittransform而不需要通過很長的jQuery css函數。該機還採用3d過渡女巫未正確設置只與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; 
}

另外一點就是加入translate3d在CSS文件...即使你有iPad 3的它不能處理大像這樣的圖像，所以考慮把所有div與overflow:hidden，這也會增加性能。

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

鼠標移動的例子（不要碰，但其同樣，除非你不需要ISUP檢查）

http://jsfiddle.net/AtBUh/

來源

2013-12-16 20:56:40 cocco

移動圖像周圍的iPad

回答

相關問題