效果如图：
放大前：
放大后(可拖动图片浏览)：
源码如下：
<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({ 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=" 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