viewer.js插件简单使用说明
不需要依赖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>手机扫一扫
移动阅读更方便
你可能感兴趣的文章