码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2015-10-19 10:51:45      阅读:1818      评论:0      收藏:0      [点我收藏+]

标签:

首先引入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‘)下的每一个图片元素都可以进行双指缩放,双击放大。

 

  

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

标签:

原文地址:http://www.cnblogs.com/well-nice/p/4891119.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!