JS实现放大镜效果

效果图

HTML部分：

CSS部分：

*{
    margin: 0;
    padding: 0;
}
 
.small {
    width: 400px;
    height: 400px;
    position: relative;
    margin-left: 200px;
    margin-top: 100px;
    border:4px solid #ddd;
    box-shadow: 0 0 5px rgba(0,0,0,.5);
}
.small img{
    width: 100%;
    height: 100%;
}
.small .wrap{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
}
.small .grayBox{
    display: none;
    width: 100px;
    height: 100px;
    background-image: url(../images/dog.jpg);
    background-size:400px 400px;
    background-position: 0 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 0;
}   
 
.big{
    width: 400px;
    height: 400px;
    position: absolute;
    left: 700px;
    top: 100px;
    border:1px solid #f10;
    display: none;
    overflow: hidden;
}
.big img{
    position: absolute;
 
}

JS部分：

    class Magnifier{
        constructor(options){
            this.options = options;
        }
        init(){
            /*
                small_box_ele  : 小盒子
                small_img_ele  : 小图片
                cutting_box_ele: 显示一部分的盒子
                big_box_ele    : 放大后的盒子
                big_img_ele    : 放大后的图片
            */
            for(var attr in this.options){
                this[attr + "_ele"] = this.$(this.options[attr]);
            }
            this.small_box_offset = {
                left  : this.small_box_ele.offsetLeft,
                top   : this.small_box_ele.offsetTop,
                width : this.small_box_ele.offsetWidth,
                height: this.small_box_ele.offsetHeight
            }
            this.cutting_box_offset = {
                width:  parseInt(getComputedStyle(this.cutting_box_ele).width),
                height: parseInt(getComputedStyle(this.cutting_box_ele).height)
            }
            this.bindEvent();
        }
        $(selector){
            return document.querySelector(selector);
        }
        bindEvent(){
            this.small_box_ele.addEventListener("mouseover", function(){
                this.showOrHidden("show");
            }.bind(this));
            this.small_box_ele.addEventListener("mouseout", function(){
                this.showOrHidden("hidden");
            }.bind(this));
            this.small_box_ele.addEventListener("mousemove", function(evt){
                var e = evt || event;
                var x = e.clientX;
                var y = e.clientY;
                var res = this.factoryPos(x, y);
                this.eleMove(res.x, res.y);
            }.bind(this));
            this.small_box_ele.addEventListener("wheelhander", function(evt){
                console.log("滚动");
            })
        }
        showOrHidden(type){
            // cutt和大图的显示隐藏
            // this.cutting_box_ele.style.display = type === "show" ? "block" : "none";
            // this.big_box_ele.style.display     = type === "show" ? "block" : "none";
            if(type === "show"){
                this.cutting_box_ele.style.display = "block";
                this.big_box_ele.style.display = "block";
                // 小图的透明图调整
                this.small_img_ele.style.opacity = "0.5";
            } else {
                this.cutting_box_ele.style.display = "none";
                this.big_box_ele.style.display = "none";
                // 小图的透明图调整
                this.small_img_ele.style.opacity = "1";
            }
        }
        eleMove(x, y){
            this.cutting_box_ele.style.left = x + "px";
            this.cutting_box_ele.style.top  = y + "px";
            // cutting_box_ele的背景移动
            this.cutting_box_ele.style.backgroundPosition  = -x + "px " + -y + "px" ;
            // 放大后图片的移动
            this.big_img_ele.style.left = -x * (400 / 300) + "px"; 
            this.big_img_ele.style.top  = -y * (400 / 300) + "px"; 
        }
        factoryPos(x, y){
            var _left = x - this.small_box_offset.left - this.cutting_box_offset.width / 2;
            var _top  = y - this.small_box_offset.top  - this.cutting_box_offset.height / 2;
            // 边界检测
            _left = _left <= 0 ? 0 : _left;
            _top  = _top  <= 0 ? 0 : _top;
            var left_max = this.small_box_offset.width  - this.cutting_box_offset.width - 8;
            var top_max  = this.small_box_offset.height - this.cutting_box_offset.height - 8;
            _left = _left >= left_max ? left_max : _left; 
            _top  = _top  >= top_max  ? top_max  : _top; 
            return {
                x: _left,
                y: _top
            }
        }
    }

    new Magnifier({
        small_box : ".small",
        small_img : ".small img",
        cutting_box : ".grayBox",
        big_box : ".big",
        big_img : ".big img"
    }).init();