图片预览放大js插件

阿超

发布于 2022-08-16 16:02:49

61.7K1

发布于 2022-08-16 16:02:49

文章被收录于专栏：快乐阿超

分享一个非常简单的图片预览插件viewer

首先引入js和css

viewer.js:下载链接

jquery1.11.3.js:下载链接

jquery-viewer.min.js:下载链接

viewer.css:下载链接

然后引入

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="{路径}/viewer.css" rel="external nofollow" rel="external nofollow">
    <script src="{路径}/jquery-1.11.3.min.js"></script>
    <script src="{路径}/viewer.js"></script>
    <script src="{路径}/jquery-viewer.min.js"></script>
</head>

使用方式：

<body>
    <!-- 需要一个块级容器 -->
    <div>
        <img id="image" src="http://p16.qhimg.com/bdm/960_593_0/t01ba97d26345750c04.jpg" alt="Picture">
    </div>

    <div>
        <ul id="images">
            <li><img src="http://p7.qhimg.com/bdm/960_593_0/t01b32959885c781013.jpg" alt="Picture 1"></li>
            <li><img src="http://p19.qhimg.com/bdm/480_296_0/t01bf50d8d5d76238c6.jpg" alt="Picture 2"></li>
            <li><img src="http://p18.qhimg.com/bdm/960_593_0/t0177a850faae7b42f4.jpg" alt="Picture 3"></li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    var $image = $('#image');
    $image.viewer({
        //行内显示（默认初始化）
        inline: false,
        viewed: function () {
            //缩放等级（1倍)
            $image.viewer('zoomTo', 1);
        }
    });
    // 初始化后获取Viewer.js实例
    var viewer = $image.data('viewer');
    // 查看图像列表
    $('#images').viewer();
</script>

项目文档：链接

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-07-19，如有侵权请联系 cloudcommunity@tencent.com 删除

css