JS图片查看器-viwerjs的用法

未闻花名_zh

于 2017-07-24 18:24:17 发布

阅读量1.6k

点赞数

分类专栏： javascript 文章标签： js 照片查看器 viewer.js

javascript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用viewer.js实现图片预览功能。只需引入必要的js和css文件，通过简单配置即可让页面支持图片缩放、旋转等交互操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

viewer.js的用法很简单，只需要引入js和css文件就可以使用：

     <link rel="stylesheet" href="viewer.min.css">
     <script src="viewer.min.js"></script>

然后只需要简单的js代码调用即可：

    <script>
        var viewer = new Viewer(document.getElementById('imgs'), {
            url: 'data-original'
        });
    </script>

HTML代码：

    <ul id="imgs">
        <li><img data-original="images/big-1.jpg" src="images/sm-1.jpg" alt=""></li>
        <li><img data-original="images/big-2.jpg" src="images/sm-2.jpg" alt=""></li>
        <li><img data-original="images/big-3.jpg" src="images/sm-3.jpg" alt=""></li>
        <li><img data-original="images/big-4.jpg" src="images/sm-4.jpg" alt=""></li>
        <li><img data-original="images/big-5.jpg" src="images/sm-5.jpg" alt=""></li>
    </ul>

JQ版本的链接地址： http://www.dowebok.com/192.html