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

时间：6年前阅读：6027

一款十分简单的jQuery的代码：点击图片放大可拖动查看效果，支持放大缩小图片预览，图片放大后(可拖动大图浏览)效果。

js代码下载地址：

https://www.qiquanji.com/js/jquery.js

https://www.qiquanji.com/js/jquery.imageView.js

图片放大前：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
    <title></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: 590, height: 640 });
        });
    </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: 590px; height: 640px; overflow: hidden; position: relative; cursor: -moz-zoom-in;">
        <img src="https://www.qiquanji.com/data/img/dmj/201905031556844305650117.jpg" rel="https://www.qiquanji.com/data/img/dmj/201905031556844332206766.jpg" alt="" id="image_view_1" style="visibility: visible; position: absolute; left: 0px; top: 0px;">
    </div>
</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

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

网友评论