mui 圖片預覽

時間 2019-11-19

標籤 mui 圖片預覽简体版

原文原文鏈接

1、前言

　　咱們在作移動端的時候，能夠會碰見上傳圖片而且查看圖片的內容。若是不想本身實現的話，能夠使用 mui 自帶的 zoom .js 和 previewimage.js 完成該項工做。javascript

2、開發環境

　　開發工具：HBuildercss

　　使用框架：muihtml

　　技術：js + html java

　　Github 項目：https://github.com/gzbitzxx/view.gitgit

3、代碼

　　重點代碼展現，黃色表明必需要。github

<!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>

4、效果展現

　　這是我本身作出來 Dome 的效果展現，有須要的本身 Github 下載。框架

代碼我上傳到了 Github 有須要的本身下載。工具

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。