我相信在移動端項目中，大家都會遇到圖片瀏覽的問題，像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里面修改源代碼。