引言
在电商类、阅读类、社交类等APP中经常会涉及到图片预览功能，只有用户愿意，只要点击图片便可单独的显示该图片，并且可以将图片进行放大预览，如何在APP中没有该小技巧的话，那用户体验可能会大打折扣。
实现的效果
源码
<html> <head> <meta charset="utf-8"> <title>图片预览</title> <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"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="css/mui.min.css"> <link rel="stylesheet" type="text/css" href="css/previewimage.css"/> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">图片预览</h1> </header> <div class="mui-content"> <!--<div class="mui-content-padded">--> <!--<div>--> <img src="img/lf.jpg" data-preview-src="" /> <!--</div>--> <!--</div>--> </div> </body> <script src="js/mui.min.js"></script> <script src="js/mui.zoom.js"></script> <script src="js/mui.previewimage.js"></script> <script> // 初始化图片预览功能 mui.previewImage(); </script> </html>
说明：
1.需要引入的css : mui.min.css previewimage.css
2.需要引入的js : mui.min.js mui.zoom.js mui.previewimage.js
3.需要使用 mui.previewImage(); 初始化图片预览功能
4.<img>标签要加上 data-preview-src="" 属性
下载地址：
链接：https://pan.baidu.com/s/1_M3J3gncAsmQkIFBgKV5zg
提取码：lejy