使用javascript在移動設備上平滑拖動圖像

嗨，我想創建一個JavaScript應用程序，我必須拖動圖像。我已經打破下來到這裏最小（僅適用於觸摸事件，需要的jQuery）：使用javascript在移動設備上平滑拖動圖像

\t \t var draggable = $("#draggable")[0]; 
 
\t \t draggable.x = 0; 
 
\t \t draggable.y = 0; 
 

 
\t \t $("#draggable").bind('touchstart', function(e) { 
 
\t \t draggable.lastmouse = e.originalEvent.touches[0]; 
 

 
\t \t }); 
 
\t \t $("#draggable").bind('touchmove', function(f) { 
 
\t \t f = f.originalEvent.touches[0]; 
 
\t \t var newx = draggable.x + (f.clientX - draggable.lastmouse.clientX); 
 
\t \t var newy = draggable.y + (f.clientY - draggable.lastmouse.clientY); 
 
\t \t draggable.x = newx; 
 
\t \t draggable.y = newy; 
 
\t \t $(draggable).css('transform', 'translate3d(' + newx + 'px,' + newy + 'px,0)'); 
 
\t \t draggable.lastmouse = f; 
 
\t \t });

<div class="map" id="draggable" style="width: 90%; height: 90%; position: absolute;"> 
 
    <img src="http://upload.wikimedia.org/wikipedia/commons/3/3d/FuBK-Testbild.png" width="100%" height="100%"> 
 
</div>

在它運行平穩電腦，但是，當我拖我的GalaxyS4其口吃周圍的圖像，雖然我用translate3d。我認爲這將是硬件accellerated。

有沒有辦法獲得本機應用程序般的性能？

來源

2015-01-31 wutzebaer

如果你可以將谷歌地圖順利您的設備上，比我想這是可能的，問題是如何....你有沒有嘗試過[這個插件]（http://jquery-plugins.net/jquery-kinetic-smooth-drag-scrolling），也許[這一個]（http://cubiq.org/ iscroll-5）？ – skobaljic 2015-01-31 21:04:04

我現在用HTML5畫布去，它的性能比我老的方法要好得多，我的代碼是更直觀

來源

2015-02-06 11:20:13 wutzebaer

使用javascript在移動設備上平滑拖動圖像

回答

相關問題