最简单的使用图片点击放大插件viewer.js的使用方法

本篇文章,分享【最简单的使用图片点击放大插件viewer.js的使用方法】


摘要:由于本人的一个问题,在捣鼓图片的时候,发现,如果图片太小,导致看不清。然后就去网上找了很多插件,发现都不满意,最后发现了viewer.js丨确实,这个插件很强大,也很合我意,因为这个插件有个特点就是,响应,而且还可以放大。这正是我需要的!


发表viewer.js的使用教程的人有很多,但是对于一些半小白来说,他们想要的,是最简单快捷的。
所以我就发一篇教程吧。

话不多少啦,先看效果图,加载略慢。
听风教程-viewer插件演示图.gif


开始教程

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>viewer.js的使用教程-标准开头</title>
        <!-- 引用css样式 -->
                <link rel="stylesheet" type="text/css" href="css/viewer.min.css"/>
        <!-- 先引用JQ -->
        <script src="js/jquery-2.1.4.min.js"></script>
        <!-- 接着顺序要正确,继续引用 -->
        <script src="js/viewer.min.js"></script>
        <script src="js/jquery-viewer.min.js"></script>
    </head>
    <body>
                <div>
            <img src="img/55.jpg" alt="听风博客viewer.js教程">
                <div>
    </body>
</html>

然后接着往下


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>viewer.js的使用教程-标准开头</title>
        <!-- 引用css样式 -->
                <link rel="stylesheet" type="text/css" href="css/viewer.min.css"/>
        <!-- 先引用JQ -->
        <script src="js/jquery-2.1.4.min.js"></script>
        <!-- 接着顺序要正确,继续引用 -->
        <script src="js/viewer.min.js"></script>
        <script src="js/jquery-viewer.min.js"></script>
    </head>
    <body>
                <div id="viewer_img">
            <img src="img/55.jpg" alt="听风博客">
            <img src="img/55.jpg" alt="听风博客">
            <img src="img/55.jpg" alt="听风博客">
        </div>

                <!--
        在底部添加让插件启用  false表示关闭,true表示开启
        详解:$('#viewer_img')就是你要放大图片的父级,你可以套个div,然后id或者class都可以,懂JQ的都懂。
        -->
        <script type="text/javascript">
            $(document).ready(function () {
                $('#viewer_img').viewer({
                    navbar: false,
                    button: true,
                    toolbar: false,
                    title: false
                });
            });
        </script>
    </body>
</html>

demo(演示文档)下载

此处内容需要评论回复后(审核通过)方可阅读。

Last modification:January 6th, 2020 at 11:10 am
If you think my article is useful to you, please feel free to appreciate

8 comments

  1. Bebold

    我的怎么没法缩放?

    1. 听风
      @Bebold

      你可以看一下DOME,这个很简单的啦。

      1. BeBold
        @听风

        放到项目里不行,不知道什么原因?

        1. 听风
          @BeBold

          是不是没开启或者哪里操作错误了

          1. Bebold
            @听风

            单独运行可以,但是整合到项目里不行,点击也没反应。

  2. 开开

    怎么点击空白处关闭

    1. 听风
      @开开

      安装后有的,可以看看我的演示DOME

  3. jack

    效果不错

Leave a Comment