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