当前位置: 移动技术网 > IT编程>网页制作>CSS > viewer.js图片预览插件

viewer.js图片预览插件

2018年12月09日  | 移动技术网IT编程  | 我要评论
记录贴。介绍图片预览插件用法防止以后用到。下面这网址对view.js上手较快 下面我记录下比较关键的步骤 <--引入重要库--> 然后就是img标签 //data-original显示大

记录贴。介绍图片预览插件用法防止以后用到。下面这网址对view.js上手较快

下面我记录下比较关键的步骤

<--引入重要库-->

然后就是img标签

//data-original显示大图地址可以不写,src必须要写,alt无所谓

然后img标签必须都要在一个容器里,这里p 和ul分别相当于一个容器

接下来最关键的一步

//这是view对象重要的操作都是和这个相关

var viewer;

//这个就是刚才我说的容器如果是pex 预览加载出来的就有两张图片,如果是ulex就是一张

var objfile = document.getelementbyid('pex');

//这个objfile 也可以是img对象就是以img单独一个容器所以就只有一张

viewer = new viewer(objfile, {

//url就是图片地址也可以用原图地址img属性里介绍了,这里还可以写一些属性,旋转啊啥的具体看链接

url: 'src',

hidden: function () {

//摧毁容器,不摧毁会有些小bug

viewer.destroy();

},

});

//这个就是点开那张图片就是那张图片,从点开图片的那张开始

viewer.view(imgindex);

//下面相当于直接展示容器从第一张开始

//viewer.show();

注:具体开发请参考官方.

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网