一、前言
我们在做移动端的时候，可以会遇见上传图片并且查看图片的内容。如果不想自己实现的话，可以使用 mui 自带的 zoom .js 和 previewimage.js 完成该项工作。
二、开发环境
开发工具：HBuilder
使用框架：mui
技 术：js + html
Github 项目：https://github.com/gzbitzxx/view.git
三、代码
重点代码展示，黄色代表必须要。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>有趣测试</title> <link href="css/mui.min.css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="css/mui.imageviewer.css" /> </head> <body> <!-- 主页面标题 --> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">测试图片预览</h1> </header> <!-- 作者：1123195494@qq.com 时间：2019-06-14 描述：图片部分 --> <img src="images/img1.jpg" data-preview-src="" data-preview-group="1" /> <img src="images/img2.jpg" data-preview-src="" data-preview-group="1" /> <img src="images/img3.jpg" data-preview-src="" data-preview-group="1" /> <script src="js/mui.min.js"></script> <script src="js/mui.zoom.js"></script> <script src="js/mui.previewimage.js"></script> <script type="text/javascript" charset="utf-8"> mui.previewImage(); </script> </body> </html>
四、效果展示
这是我自己做出来 Dome 的效果展示，有需要的自己 Github 下载。
代码我上传到了 Github 有需要的自己下载。