图片放大镜-创新互联

目前创新互联建站已为上千多家的企业提供了网站建设、域名、雅安服务器托管、绵阳服务器托管、企业网站设计、清水网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。>

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><htmlxmlns="http://www.w3.org/1999/xhtml"><head>  <metahttp-equiv="Content-Type" content="text/html; charset=utf-8" />  <title></title>  <styletype="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>  <divclass="container">   <imgalt="../../../images/DSCN0015.JPG" id="idImage" class="izImage" src="../../../images/DSCN0015.JPG" />   <divid="idViewer" class="izViewer"></div>  </div>  <divid="log"></div></body><scriptsrc="../../../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>--><!--加上该引用后可以继续用--><scriptsrc="../../../js/jone.js" type="text/javascript"></script><scriptsrc="ZoomImage_wzq.js" type="text/javascript"></script><scripttype="text/javascript">  var iz= new ImgZoom("idImage","idViewer", {});
</script></html>

分享题目：图片放大镜-创新互联
当前链接：https://www.cdcxhl.com/article40/csojho.html

成都网站建设公司_创新互联，为您提供网站营销、品牌网站制作、网站收录、响应式网站、ChatGPT、Google

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容