viewer.js插件简单使用说明

来源：互联网发布：对网络课程的认识编辑：程序博客网时间：2024/06/03 14:47

不需要依赖jQuery.js，只需要导入viewer.js和viewer.css文件即可。

插件GitHub地址：https://github.com/fengyuanchen/viewerjs

示例代码如下：

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <title>viewer.js强大的响应式图片弹出层(360度旋转、放大缩小)演示-默认效果</title>        <link rel="stylesheet" href="css/viewer.min.css">        <style>            * { margin: 0; padding: 0;}            #sucaihuo { width: 700px; margin: 0 auto; font-size: 0;}            #sucaihuo li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}            #sucaihuo li img { width: 100%;}            #sucaihuo2 { width: 700px; margin: 0 auto; font-size: 0;}            #sucaihuo2 li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}            #sucaihuo2 li img { width: 100%;}        </style>    </head>    <body>        <h1>默认效果</h1>        <h3>图片异源</h3>        <!-- 展示和弹出图片源异源 -->        <ul id="sucaihuo">            <li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li>            <li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li>            <li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li>            <li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li>            <li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li>            <li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片6"></li>        </ul>        <br/><br/><br/>        <h3>图片同源</h3>        <!-- 展示和弹出图片源同源 -->        <ul id="sucaihuo2">            <li><img src="img/tibet-1.jpg" alt="图片1"></li>            <li><img src="img/tibet-2.jpg" alt="图片2"></li>            <li><img src="img/tibet-3.jpg" alt="图片3"></li>            <li><img src="img/tibet-4.jpg" alt="图片4"></li>            <li><img src="img/tibet-5.jpg" alt="图片5"></li>            <li><img src="img/tibet-6.jpg" alt="图片6"></li>        </ul></body><script src="js/viewer.min.js"></script><!-- <script type="text/javascript" src="http://shouce.ren/static/ad/gg.js"></script>--><script>var viewer = new Viewer(document.getElementById('sucaihuo'), {url: 'data-original'});        var viewer2 = new Viewer(document.getElementById('sucaihuo2'));</script></html>

阅读全文

0 0