特效介绍
mui不得不说，是一款非常强大的接近原生APP体验的高性能前端框架，而且入门很简单，提供了很多接近原生app的插件，例如datepicker等。今天，就来介绍下图片查看器插件mui.previewimage.js，它的效果简单说明下：即点击缩略图，全屏显示大图（大图显示前会有加载动画），并且支持左右滑动切换上一张下一张，也就是分组功能，长按图片可以下载，双击或手指上下左右拖拽放大等，几乎和Android和IOS图片查看器差不多。效果图如下：
使用方法
1、在head引入css文件：
1 | <link rel="stylesheet" type="text/css" href="css/mui.min.css"/> |
2 | <link href="css/previewimage.css" rel="stylesheet"> |
2、将图片按照下面格式来，其中，data-preview-src为大图地址，data-preview-group为分组，一组图片请用同一个数字表示，src为缩略图地址
1 | <img data-preview-src="b.jpg" data-preview-group="1" src="s.jpg"> |
3、引入js
1 | <script src="js/mui.min.js"></script> |
2 | <script src="js/mui.zoom.js"></script> |
3 | <script src="js/mui.previewimage.js"></script> |
4、初始化js，建议放在mui.plusready()里面：
注意： 只有在使用hbuilder新建移动app项目时，选择Hello H5+模板，才能找到previewimage.css 和 mui.previewimage.js，如下图：
