js实现双指缩放图片 手机端双指缩放图片

首先引入js文件，需要jq,pinchzoom.js。pinchzoom.js需要在jq环境下使用，可以

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />

<script type="text/javascript" src="../dependencies/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../src/pinchzoom.js"></script>

script调用插件为：

<script type="text/javascript">
        $(function () {
            $('div.pinch-zoom').each(function () {
                new RTP.PinchZoom($(this), {});
            });
        })
    </script>

body结构：

 

 <div class="page">
        <div class="pinch-zoom">
            <div class="description">
                <h1>Pinchzoom.js</h1>
                <p>
                    Multi-touch zoom in Javascript
                </p>
            </div>
            <img src="frog.jpg"/>
            <a class="image" href="http://www.flickr.com/photos/59446027@N00/5258583198" target="_blank">by Peter Nijenhuis on Flickr; Some rights reserved</a>
        </div>
    </div>

 

看调用插件的函数就知道

 $('div.pinch-zoom')下的每一个图片元素都可以进行双指缩放，双击放大。

 

　　

转载于:https://www.cnblogs.com/well-nice/p/4891119.html