首页 > 代码库 > viewer.js的简单练习

viewer.js的简单练习

html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href=http://www.mamicode.com/"css/viewer.css"/>
</head>
<body>
<ul id="myul">
<li><img src=http://www.mamicode.com/"img/1a.jpg"/> </li>
<li><img src=http://www.mamicode.com/"img/2a.jpg"/> </li>
<li><img src=http://www.mamicode.com/"img/3a.jpg"/> </li>
<li><img src=http://www.mamicode.com/"img/4a.jpg"/> </li>
<li><img src=http://www.mamicode.com/"img/5a.jpg"/> </li>
</ul>
<script src=http://www.mamicode.com/"js/jquery-1.11.0.js"></script>
<script src=http://www.mamicode.com/"js/viewer.js"></script>
<script src=http://www.mamicode.com/"js/demo01.js"></script>
</body>
</html>

//demo01.js
/**
* Created by Loki on 2017/2/21.
*/
$("#myul").viewer({
//底部导航栏0:不出现;
navbar:0,
//右上角的关闭按钮是否显示:true 为默认显示;
button:true,
//是否进入页面显示遮罩层,默认false;
inline:false,
//底部导航是否显示0:不显示底部按钮;
toolbar:2,
//是否 可拖动
movable:true,
//是否 可以旋转
rotatable:true,
//是否 可以缩放图片
scalable:true,
//是否 有过渡动画(小变大)
transition:true,
//点击播放 是否全屏播放
fullscreen:true
})


viewer.js的简单练习