首页 > 代码库 > 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的简单练习
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。