600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 图片预览插件Viewer.js的使用

图片预览插件Viewer.js的使用

时间:2021-07-05 06:49:25

相关推荐

图片预览插件Viewer.js的使用

一、相关资源

Viewer 下载地址: /fengyuanchen/viewerjs

其中docs文件夹下是使用演示:

PS: 图片预览依赖的资源可以使用docs文件夹下css文件夹下的viewer.css和js文件夹下的viewer.js,也可以使用dist文件加下压缩后的资源:viewer.min.css和viewer.min.js

二、使用介绍

简单使用如下:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片预览</title><link rel="stylesheet" href="./css/viewer.min.css"><script src="./js/viewer.min.js"></script></head><body><ul id="imgView"><li><img class="img" data-original="./img/photo.jpeg" src="./img/photo.jpeg" alt=""></li><li><img class="img" data-original="./img/photo.jpeg" src="./img/photo.jpeg" alt=""></li><li><img class="img" data-original="./img/photo.jpeg" src="./img/photo.jpeg" alt=""></li><li><img class="img" data-original="./img/photo.jpeg" src="./img/photo.jpeg" alt=""></li></ul><script>var Viewer = window.Viewer; // 定义Viewer var viewer = new Viewer(document.getElementById('imgView'), {url: 'data-original'});</script></body></html>

需要注意的点:1、Viewer 必须先定义:var Viewer = window.Viewer;2、url: ‘data-original’ 中的值 ‘data-original’ 指的是预览图片的地址,需要在img上设置好自定义属性,否则不会生效。当然属性值的名字可以随意设置,只有上下保持一致就好。除url外还有其他配置如下图:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。