首先引入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实现双指缩放图片 手机端双指缩放图片的更多相关文章

  1. 适应手机端的jQuery图片滑块动画DEMO演示

    在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  2. htm5手机端实现拖动图片

    htm5手机端实现拖动图片 <pre> <!doctype html><html><head> <title>Mobile Cookbook ...

  3. js 判断pc端或手机端

    <script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...

  4. H5页面手机端禁止缩放的正确方式

    H5页面禁止手机端缩放是个常见问题了 首先说meta方式 <meta content="width=device-width, initial-scale=1.0, maximum-s ...

  5. 关于HTML5手机端页面缩放的问题

    通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: <meta name="viewport" content=" ...

  6. 手机端自适应缩放显示 js

    <script> var _width = parseInt(window.screen.width); var scale = _width/640; var ua = navigato ...

  7. 一款手机端的jQuery图片滑块插件

    今天我们要介绍一款比较特别的jQuery图片滑块插件,它不仅在PC浏览器上可以使用,而且更适合在手机端的网页中使用.这款jQuery插件不仅可以定义图片切换的方向,而且可以即时切换图片切换的动画方式, ...

  8. 适应手机端的jQuery图片滑块动画

    一款比较特别的jQuery图片滑块插件,它不仅在PC浏览器上可以使用,而且更适合在手机端的网页中使用.这款jQuery插件不仅可以定义图片切换的方向,而且可以即时切换图片切换的动画方式,可以有平移.翻 ...

  9. h5手机端禁止缩放问题

    最近测试html5页面,发现默认都允许用户缩放页面,或者在屏幕双击放大或缩小.即相当于这样设置 <meta name="viewport" content="wid ...

随机推荐

  1. ubutu下source命令问题(复制)

    最近一段时间在使用Bash on Ubuntu on Windows做shell脚本调试时发现在脚本中使用source时会报错,上网查了下才了解到原来是在Ubuntu中使用的并不是bash,而是使用 ...

  2. php 将数组存入cookie

    最近在做一个购物车的功能,需要将商品的ID和商品数量存入cookie,实际上,cookie是不能存数组的,因此需要用到序列化函数serialize() 函数解释: serialize()就是将PHP中 ...

  3. oracle或mysql定时增量更新索引数据到Elasticsearch

    利用kettle Spoon从oracle或mysql定时增量更新数据到Elasticsearch https://blog.csdn.net/jin110502116/article/details ...

  4. 模拟赛 yjqa

    考场上怕是石乐志. 状态设计还是很自然的,求什么设什么. f[i]表示前i个人安排好,电梯最早回到0层的时间 转移的话,枚举上一次最后一个带走的是谁 f[i]=min(max(f[j],t[i])+2 ...

  5. 深入理解Java虚拟机—内存管理机制

    前面说过了类的加载机制,里面讲到了类的初始化中时用到了一部分内存管理的知识,这里让我们来看下Java虚拟机是如何管理内存的. 先让我们来看张图 有些文章中对线程隔离区还称之为线程独占区,其实是一个意思 ...

  6. linux启动一个web项目时验证码不能出现的问题的解决

    解决方法: 在tomcatcatalina.sh中搜索cygwin=false,然后在它的上面加上这句话JAVA_OPTS='-Djava.awt.headless=true' 具体参考如下图片: 然 ...

  7. 用实例工厂的方法实例化bean

    在实例化bean时,除了setter,constructor方法外,还有实例工厂方法,和静态工厂方法. 看代码: People类的代码如下: package com.timo.domain; publ ...

  8. Django请求原理

    总结一下: 1. 进来的请求转入/hello/. 2. Django通过在ROOT_URLCONF配置来决定根URLconf. 3. Django在URLconf中的所有URL模式中,查找第一个匹配/ ...

  9. bzoj 1110 [POI2007]砝码Odw 贪心+进制转化

    [POI2007]砝码Odw Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 661  Solved: 366[Submit][Status][Disc ...

  10. VC++中编译C出错:error C2143: syntax error : missing ';' before 'type'

    转摘自:http://preceo.blog.51cto.com/6225017/1130931 近来写程序时发现了一个问题,用 VC 编译 C语言是 总是提示一个错误:error C2143: sy ...