MUI实现图片预览功能

引言

在电商类、阅读类、社交类等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

posted @ 2020-06-11 09:38  农名工进城  阅读(1564)  评论(0)  编辑  收藏  举报