欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery点击图片放大拖动查看效果

程序员文章站 2022-06-18 23:36:13
效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: js资源下载地址:https://pan.baidu.com/s/1ew7iernrBAWZ0kuhr21s0A#list/path=%2F ......

效果如图:

放大前:

jQuery点击图片放大拖动查看效果

放大后(可拖动图片浏览):

jQuery点击图片放大拖动查看效果

源码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>jquery点击图片拖动放大查看效果</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.imageview.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#imageview_container').imageview({ width: 850, height: 708 });
        });
    </script>
    <style type="text/css">

        body {
            background-color: #555;
            color: #fff;
        }

        a img {
            border: none;
        }

        #imageview_container {
            border: 2px solid #000;
            margin: 0 auto;
        }

            #imageview_container.iv-loading {
                border: 2px solid #ff6600;
            }
    </style>
</head>
<body>
    <div id="imageview_container" class="" style="width: 850px; height: 708px; overflow: hidden; position: relative; cursor: -moz-zoom-in;">
        <img src="http://www.xwcms.net/webanneximages/fileannex/201506/27268/images/12awe51.jpg" rel="http://www.xwcms.net/webanneximages/fileannex/201506/27268/images/sad2.jpg" alt="" id="image_view_1" style="visibility: visible; position: absolute; left: 0px; top: 0px;">
    </div>
</body>
</html>

 

js资源下载地址:https://pan.baidu.com/s/1ew7iernrbawz0kuhr21s0a#list/path=%2f