效果如图：

放大前：

\"\"

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

\"\"

源码如下：

<html  ns="http://www.w3.org/1999/xhtml">
<head>
    <  http-equiv="Content-Type" content="text/html; charset=utf-8">
    < >jQuery点击图片拖动放大查看效果</ >
    <  type="text/ " src="js/jquery.js"></ >
    <  type="text/ " src="js/jquery.imageView.js"></ >
    <  type="text/ ">
        $(function () {
            $('#imageView_container').imageView({ width: 850, height: 708 });
        });
    </ >
    <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>

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章