小图点击放大预览效果

主要是mui.previewimage.js和mui.zoom.js的使用

效果：

image.png

点开小图后(mui.zoom.js)，会由小图缓冲放大

image.png

放大后占满整个屏幕（或者是图片的宽度），并且可以用手指继续放大或者缩小查看：

image.png

经过缓冲加载后的图片左右滑动就是大图的形式：

image.png

使用步骤：
(1)引入js文件

 当然，mui.min.js离不开mui.min.css

(2)一段css样式代码(这个是必须的)

(3)需要小图预览的图片需要两个属性:data-preview-src(没有这个属性，Js无法抓取图片操作哦)和data-preview-group(设定为一个组的图片,一个组有多少图片，左上角数字显示就有多少)

![](images/06.jpg)
![](images/10.jpg)
![](images/17.jpg)

(4)在mui初始化后调用mui.previewImage()方法

---

** 总结：**

写个小demo还是灰常容易的呢，主要还是要学会分离项目，这个效果官方文档上并没有看到，后来在一个项目案例中发现有类似的效果，就抽取出来了，效果已经算很友好了，上手也很简单，做过安卓的画廊后发现web其实很多时候只要接触的东西多，一些框架，一些js了解一些，做东西就会快很多，所以还是要不断学习，不断接触一些新的技术知识，这样会省去很多实现起来的麻烦。

image.png

image.png