关于移动端图片浏览，previewimage的使用

我相信在移动端项目中，大家都会遇到图片浏览的问题，像qq，微信，微博，淘宝，当你点击图片时，图片会放大全屏显示，双击图片时图片继续放大查看，双指左右滑动也可以放大，当你再次点击时图片，图片恢复原始大小，并且图片可以左右滑动切换，

今天给大家讲讲我在项目中如何实现这个功能的。

首先我们将要用到previewimage.js,mui.zoom,js和mui.js或者mui.min.js,还有一个previewimage.css样式。下面直接看代码，注释也很详细。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.previewimage.css"/>
</head>
<body>
    <!-- html结构 -->
    <div class="mui-content">
     <p>这是第一张图</p>
     <p>
       <img src="img/1.png" data-preview-src="" data-preview-group="1" />
     </p>
     <p>这是第二张图</p>
     <p>
       <img src="img/2.jpg" data-preview-src="" data-preview-group="1" />
     </p>
     <p>这是第三张图</p>
     <p>
       <img src="img/3.jpg" data-preview-src="" data-preview-group="1" />
     </p>
    </div>
    <!--引入所需要的插件-->
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    // 初始化previewImage
        mui.previewImage();
    </script>
</body>
</html>

来源：https://www.cnblogs.com/xiaoyeya/p/11838320.html

标签

charset

css