mui.previewimage支持图片预览

移动端的图片预览，先看效果图：

上面这张图是从csdn中获取的，不得不说，csdn的图片url弄的真是太好了，我转存之后文件名变成了一堆数字，后面尝试着加上了.gif才知道，原来......

主流的预览插件就是:mui.previewimage.js了。

下面讲解整个流程：

需要文件

1、正常的普通的test.html文件

2、mui.previewimage.js/ mui.js/ mui.zoom.js 这三个脚本

3、mui.previewimage.css/mui.css这两个样式文件。前面一个css文件是根据官方的文档从官网复制下来的样式表到本地自建的样式文件

组合成可以放大预览的html

1、在test.html的头部加入：

2、在test.html的末尾之后加入：

3、在img标签中加入：

data-preview-src="" data-preview-group="1"

形成效果：

ok,恭喜你，完成了移动端的图片预览功能了。

注意：脚本要在html之后加载，因为mui.previewimage.js里头初始化的时候要用到document,如果不放在末尾会出现下面错误，有一点基础的人都能看懂错误：

mui.previewimage.js:24 Uncaught TypeError: Cannot read property 'appendChild' of null
    at PreviewImage.proto.init (mui.previewimage.js:24)
    at new PreviewImage (mui.previewimage.js:15)
    at Function.$.previewImage (mui.previewimage.js:374)
    at h52018062816310209310.html:9

查看源码会发现document为null。

上面用到的相关文件：css和js百度都有。如果找不到可以留言哈。

 

扎心了老铁，发现好多网友留言说找不到css和js，作者整理了下丢到了csdn资源库里头了，点击链接去下载吧。