图片放大镜-创新互联

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

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

        .izImage, .izViewer{
            border: 1px solid #000;
          
}

        .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%; }          
var iz= new ImgZoom("idImage","idViewer", {});
分享题目:图片放大镜-创新互联
本文地址:http://bzwzjz.com/article/csojho.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站制作公司 移动手机网站制作 高端网站设计推广 四川成都网站制作 成都网站设计 成都网站设计 专业网站设计 企业网站建设 营销网站建设 成都网站建设 网站建设开发 企业网站建设公司 成都网站设计 成都网站建设 成都网站制作 响应式网站设计 手机网站建设套餐 手机网站制作 成都商城网站建设 重庆电商网站建设 成都网站设计 成都网站建设