如何在手机中的div标签内放大缩小功能

Question

我想知道如何使用手机缩放功能。最近我尝试使用cubiq.org/dropbox/iscroll4/examples/zoom/进行缩放功能。 它适用于三星Galaxy S4，但不适用于平板电脑，它不响应。 有人请推荐我哪个库适合缩放。 谢谢。

Answer 1

你有正确的想法，但你的链接是iScroll的v4。在这里获取最新版本 - http://iscrolljs.com/ - 并确保您的看看包含放大的示例。

一些iScroll库仅用于滚动而不缩放！

我在Phonegap应用程序中只使用了iscroll-zoom.js文件。这里是我的代码：

<script src="iscroll-zoom.js"></script> 
    <div id="wrapper"> 
     <div id="scroller"> 
      <img src="whatever" width="1150" height="1150" /> 
     </div> 
    </div> 
    <script> 
    var myScroll; 
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
    setTimeout(function() { 
     myScroll = new IScroll('#wrapper', { 
      zoom: true, 
      scrollX: true, 
      scrollY: true, 
      mouseWheel: true, 
      wheelAction: 'zoom' 
     }); 
    }, 100); 
</script> 

大部分JS需要在onDeviceReady之内。

这工作在Android（Nexus 7）和iOS（iPhone5）。