jQuery點擊圖片放大拖動查看效果

效果如圖：javascript

放大前：css

放大後(可拖動圖片瀏覽)：html

源碼以下：java

<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=%2Fjquery