如何在phonegap的div标签内进行缩放功能 [英] How to make zoom function within a div tag in phonegap

问题描述

我想知道如何使用phonegap进行缩放功能.最近，我尝试了 cubiq.org/dropbox/iscroll4/examples/zoom/的缩放功能.它适用于三星galaxy s4，但不适用于平板电脑且无响应.任何人都可以向我推荐哪个库适合缩放.谢谢.

I want to know how to make zoom function with phonegap. Recently I tried zoom function with cubiq.org/dropbox/iscroll4/examples/zoom/. It works on samsung galaxy s4, but does't work on tablet and it's not responsive. Anybody please recommend me which library is good for zoom. Thanks.

推荐答案

您有正确的主意，但您的链接是指向iScroll v4的.在此处获取最新版本- http://iscrolljs.com/-确保您查看示例其中包括缩放.

You had the right idea but your link is to v4 of iScroll. Get the latest version here - http://iscrolljs.com/ - and make sure you look at the examples which include zooming.

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

Some iScroll libraries are just for scrolling and do not zoom!

我在Phonegap应用程序中仅使用了 iscroll-zoom.js 文件.这是我的代码:

I used only the iscroll-zoom.js file in my Phonegap app. Here's my code:

    <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 内.

Most of the JS needs to be within onDeviceReady.

这适用于Android(Nexus 7)和iOS(iPhone5).

This worked in Android (Nexus 7) and iOS (iPhone5).

这篇关于如何在phonegap的div标签内进行缩放功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！