基于bootstrap点击图片放大插件 

        <!DOCTYPE html>
        <html>
        <head>
            <title></title>
            <!-- Introducing the bootstrap style css file-->
            <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
        </head>
        <body>
                <!-- demo image -->
                <img src="assets/img/demo1.jpg" width="400" class="viewer img-responsive"/>
        <!--Introduce the necessary js file-->
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
        <script src="dist/bootstrap.viewer.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('.viewer').bootstrapViewer();//The default image source file path is the src attribute of the img tag.
            })
        </script>
        </body>
        </html>

插件下载地址：http://bootstrap-viewer.leftso.com/

posted @ 2020-05-27 10:10  嘆世殘者——華帥  阅读(4609)  评论(2)    收藏  举报