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

viewer.js的简单练习

2024-09-05 06:34:16   220人阅读

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的简单练习


联系
我们