對於手機上圖片的縮放通常有兩種：
介紹第一種情況的插件，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>