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

117次阅读
没有评论

一、相关资源
Viewer 下载地址: https://github.com/fengyuanchen/viewerjs
其中docs文件夹下是使用演示:

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

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

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

二、使用介绍
简单使用如下:

图片预览

<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>

正文完
 
评论(没有评论)