使用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在移动设备上平滑拖动图像

回答

相关问题