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')下的每一个图片元素都可以进行双指缩放,双击放大。
js实现双指缩放图片 手机端双指缩放图片的更多相关文章
- 适应手机端的jQuery图片滑块动画DEMO演示
在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- htm5手机端实现拖动图片
htm5手机端实现拖动图片 <pre> <!doctype html><html><head> <title>Mobile Cookbook ...
- js 判断pc端或手机端
<script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...
- H5页面手机端禁止缩放的正确方式
H5页面禁止手机端缩放是个常见问题了 首先说meta方式 <meta content="width=device-width, initial-scale=1.0, maximum-s ...
- 关于HTML5手机端页面缩放的问题
通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: <meta name="viewport" content=" ...
- 手机端自适应缩放显示 js
<script> var _width = parseInt(window.screen.width); var scale = _width/640; var ua = navigato ...
- 一款手机端的jQuery图片滑块插件
今天我们要介绍一款比较特别的jQuery图片滑块插件,它不仅在PC浏览器上可以使用,而且更适合在手机端的网页中使用.这款jQuery插件不仅可以定义图片切换的方向,而且可以即时切换图片切换的动画方式, ...
- 适应手机端的jQuery图片滑块动画
一款比较特别的jQuery图片滑块插件,它不仅在PC浏览器上可以使用,而且更适合在手机端的网页中使用.这款jQuery插件不仅可以定义图片切换的方向,而且可以即时切换图片切换的动画方式,可以有平移.翻 ...
- h5手机端禁止缩放问题
最近测试html5页面,发现默认都允许用户缩放页面,或者在屏幕双击放大或缩小.即相当于这样设置 <meta name="viewport" content="wid ...
随机推荐
- ByteArrayInputStream/ByteArrayOutputStream 学习
ByteArrayInputStream: byte[] buff = new byte[1024]; ByteArrayInputStream bAIM = new ByteArrayInputSt ...
- HDU I-最少拦截系统
http://acm.hdu.edu.cn/showproblem.php?pid=1257 Problem Description 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦 ...
- 段寻址*****************************TBD
fffff880`01b05be1 ff9708020000 call qword ptr [rdi+208h] ds:002b:fffff980`0554ae88=fffffa8004b ...
- 关于如何利用原生js动态给一个空对象添加属性以及属性值
首先,回忆一下,访问对象属性一共有两种方法:点获取法和方括号获取法.而我们最常用的就是点获取法了.但是当我们遇到需要给对象动态添加属性和属性值时,点获取法好像就不太好用了,尤其是我们不知道属性名的时候 ...
- [Java] 各种常用函数
1.writeInt()和readInt() 这两个函数并不是写入一个整数,读取一个整数.它们实际上是写入4个字节,读取4个字节. writeInt(int i)把i按四个字节,二进制形式写到输出流里 ...
- 【Python】PYTHON九九乘法表
python2.7 for i in range(1,10): for j in range(1,i+1): print j,'x',i,'=',j*i,'\t', print '\n'pr ...
- Java Web开发之路(一)——环境配置
1. 下载JDK(Java Development Kit)工具包.其中包括运行Java程序所必须的JRE环境及开发过程中常用的库文件. (JDK与JRE的关系: JDK是Java的开发环境,在编写J ...
- 【题解】[国家集训队]Crash的数字表格 / JZPTAB
求解\(\sum_{i = 1}^{n}\sum_{j = 1}^{m}lcm\left ( i,j \right )\). 有\(lcm\left ( i,j \right )=\frac{ij}{ ...
- 你试过不用if写代码吗?
我在教新手编程时,喜欢给他们一些小小的挑战,比如:不使用if语句(或者三元运算符.switch语句等)解决一些编程问题.这样做有什么意义吗?事实上,它可以迫使你从不同的角度寻找解决方法,也许可以找到更 ...
- 洛谷 P2168 [NOI2015]荷马史诗 解题报告
P2168 [NOI2015]荷马史诗 题目描述 追逐影子的人,自己就是影子 --荷马 Allison 最近迷上了文学.她喜欢在一个慵懒的午后,细细地品上一杯卡布奇诺,静静地阅读她爱不释手的<荷 ...