移動端圖片預覽外掛-fly-zomm-img.min.js
阿新 • • 發佈：2018-12-14
移動端圖片預覽外掛，一個JQ的外掛，支援手勢放大縮小；有點小bug，不過感覺是可以接受的；
使用很簡單：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta name="renderer" content="ie-stand"> <!--避免IE使用相容模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,IE=9" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>JQ版的圖片預覽</title> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/fly-zomm-img.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ margin: 0; padding: 0; } </style> </head> <body> <div id="test"> <div> <img src="img/1.jpg" width="100"> </div> <div> <img src="img/2.jpg" width="100"> </div> <div> <img src="img/3.jpg" width="100"> </div> </div> <script> /** * H5圖示瀏覽外掛 * 支援多圖識別切換 * 支援手勢放大,切換 */ $(function (){ $('#test').FlyZommImg({ rollSpeed: 200,//切換速度 miscellaneous: false,//是否顯示底部輔助按鈕 closeBtn: true,//是否開啟右上角關閉按鈕 hideClass: 'hide',//不需要顯示預覽的 class imgQuality: 'thumb',//圖片質量型別 thumb 縮圖 original 預設原圖 slitherCallback: function (direction, DOM) { //左滑動回撥 兩個引數 第一個動向 'left,firstClick,close' 第二個 當前操作DOM console.log(direction,DOM); } }); }) </script> </body> </html>
要外掛的話可以問我要，如果看到的話會回覆的，只有壓縮版的；