我相信在移动端项目中,大家都会遇到图片浏览的问题,像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>
结构,引入样式,相关js插件,初始化不用多说,注意到的是在img标签内的其他两个属性data-preview-src="" 和 data-preview-group="1"
这两个属性是必填的,data-preview-src
为点击放大时预览图片的链接,默认可为空,为空时则是当前图片的链接;data-preview-group
将图片声明为同一组预览图。当data-preview-group里面的值为同一组时浏览图片时左右滑动即可查看同一组图片,一般情况下都将data-preview-group的值设置为1,即data-preview-group="1"。然后你就可以打开查看效果了。
当然,这只是最简单的需求,如果需要在浏览图片长按弹窗头部显示其他内容的话,还需要在previeimages.js里面修改源代码。