一、前言
我們在做移動端的時候，可以會遇見上傳圖片並且查看圖片的內容。如果不想自己實現的話，可以使用 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 有需要的自己下載。