js实现手机端图片双指缩放变大变小插件
对于手机上图片的缩放通常有两种：
介绍第一种情况的插件，pinchzoom.js，用法很简单，只需要修改img的路径，在引用pinchzoom.js以及你平时用的jquery就可以。
链接: https://pan.baidu.com/s/1niv1Eb2pZFqbNjUcwhg8Yw 提取码: 8hcb
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>图片缩放</title> <style> .pinch-zoom,.pinch-zoom img{ width: 100%; -webkit-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; user-drag: none; } </style> </head> <body> <div class="page" style="display:block"> <div class="pinch-zoom"> <img src="images/timg.jpg"/> </div> </div> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/pinchzoom.js"></script> <script type="text/javascript"> $(function () { $('div.pinch-zoom').each(function () { new RTP.PinchZoom($(this), {}); }); }) </script> </body> </html>
第二种缩放情况插件，scale.js，img一定要放在list的div里面，除了引用scale.js外还需要引用scale.css，贴出完整代码：
scale下载地址
链接: https://pan.baidu.com/s/1NUtYPJer_zvvPM5w6w_u8w 提取码: 4qhp
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>图片缩放</title> <link rel="stylesheet" href="themes/scale.css" type="text/css" /> </head> <body> <div class="list"> <img src="themes/images/2.jpg" /> </div> <section class="imgzoom_pack"> <div class="imgzoom_x">X</div> <div class="imgzoom_img"><img src="" /></div> </section> <script src="js/scale.js"></script> <script> document.addEventListener("DOMContentLoaded", function(event){ ImagesZoom.init({ "elem": ".list" }); }, false); </script> </body> </html>
