viewer.js图片预览插件
程序员文章站
2022-08-20 13:03:10
记录贴。介绍图片预览插件用法防止以后用到。下面这网址对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();
注:具体开发请参考官方.
上一篇: 仁宗盛治时期有什么经济发展?摆脱农业社会进入商业社会
下一篇: mvvm是什么
推荐阅读
-
jquery图片播放浏览插件prettyPhoto使用详解
-
jquery插件lazyload.js延迟加载图片的使用方法
-
火狐浏览器插件BatchDownload批量下载网页中的图片
-
借助谷歌浏览器chrome的的插件批量下载网页图片
-
AngularJs上传前预览图片的实例代码
-
详解nodejs实现本地上传图片并预览功能(express4.0+)
-
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
-
jQuery自定义图片上传插件实例代码
-
微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
-
previewImage.js图片预览缩放保存插件