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

最新推荐文章于 2024-03-20 13:12:57 发布

weixin_30815469

最新推荐文章于 2024-03-20 13:12:57 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/well-nice/p/4891119.html

本文介绍如何在网页中利用js文件pinchzoom.js实现多点触摸设备上的图片缩放功能，通过引入jQuery和设置meta标签确保在不同设备上正常工作。演示了如何将插件应用于特定的div元素，并提供了相应的HTML结构和脚本调用方式。

首先引入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

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

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