mui 图片预览

一、前言

　　我们在做移动端的时候，可以会遇见上传图片并且查看图片的内容。如果不想自己实现的话，可以使用 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 有需要的自己下载。

posted @ 2019-06-14 16:13  周兴兴  阅读(3736)  评论(2)  编辑  收藏  举报