图片放大镜

最新推荐文章于 2024-11-10 15:10:09 发布

weixin_34319640

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量81

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/wzq806341010/p/3629632.html

版权

var ImgZoom = function (image, viewer, options) {
    this._init(image, viewer, options);
}
ImgZoom.prototype = {
    _init: function (image, viewer, options) {
        this._image = $$O.byId(image); //原图
        this._viewer = $$O.byId(viewer); //显示框
        this._initViewer();
        this._MOVE = $$F.bindAsEventListener(this._move, this);
        //  $$E.addEvent(this._image, "mousemove", this._MOVE);
        $$E.addEvent(document, "mousemove", this._MOVE);
    },
    _initViewer: function () {
        //初始化显示框
        var viewer = this._viewer;
        $(viewer).css({ "padding": 0, "overflow": "hidden", "position": "absolute" });
        //显示图
        this._zoom = document.createElement("img");
        this._zoom.src = this._image.src;
        $(this._zoom).css("position", "absolute");
        if (!viewer.contains(this._zoom)) {
            viewer.appendChild(this._zoom);
        }
    },
    _move: function (e) {//移动
        var self = this, image = this._image, zoom = this._zoom, viewer = this._viewer, x = e.pageX, y = e.pageY;
        //原图位置
        var imageRect = {
            top: parseInt($(image).offset().top),
            left: parseInt($(image).offset().left),
            width: parseInt($(image).width()),
            height: parseInt($(image).height())
        };
        $(viewer).show();
        if (x > imageRect.left + imageRect.width || x < imageRect.left
        || y > imageRect.top + imageRect.height || y < imageRect.top) {
            $(viewer).hide();
        }
        var pos = {
            //(x - imageRect.left):相对图片的位置
            //zoom.width / imageRect.width:原图、显示图的比例
            //viewer.offsetWidth:显示框的宽度，因为需要将图片放到正中央显示，因此 viewer.offsetWidth / 2 
            left: viewer.offsetWidth / 2 - (x - imageRect.left) * (zoom.width / imageRect.width),
            top: viewer.offsetHeight / 2 - (y - imageRect.top) * (zoom.height / imageRect.height)
        };
        // $$P.log("log", "viewer.offsetWidth=" + viewer.offsetWidth);
        x = Math.ceil(Math.min(Math.max(pos.left, viewer.offsetWidth - zoom.width), 0));
        y = Math.ceil(Math.min(Math.max(pos.top, viewer.offsetHeight - zoom.height), 0));
        zoom.style.left = x + "px";
        zoom.style.top = y + "px";
    }
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .container {
            position: relative;
        }

        .izImage {
            width: 300px;
            cursor: crosshair;
        }

        .izImage, .izViewer {
            border: 1px solid #000;
          <!--  background: #fff url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif) no-repeat center;-->
        }

        .izViewer {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 320px;
            top: 0px;
            display: none;
        }

            .izViewer div {
                position: absolute;
                border: dashed 1px #999;
                top: 0px;
                left: 0px;
                z-index: 999;
                width: 100%;
                height: 100%;
            }
    </style>
</head>
<body>
    <div class="container">
        <img alt="../../../images/DSCN0015.JPG" id="idImage" class="izImage" src="../../../images/DSCN0015.JPG" />
        <div id="idViewer" class="izViewer"></div>
    </div>
    <div id="log"></div>
</body>
<script src="../../../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<!--<script src="../../../js/jquery-1.10.2.min.js"></script>
<!--jq 1.9 以上版本，废除了 live，用$.on()代替-->
<!--<script src="../../../js/jquery-migrate-1.2.1.min.js"></script>-->
<!--加上该引用后可以继续用-->
<script src="../../../js/jone.js" type="text/javascript"></script>
<script src="ZoomImage_wzq.js" type="text/javascript"></script>
<script type="text/javascript">
    var iz = new ImgZoom("idImage", "idViewer", {});
</script>
</html>