2021-06-04 放大镜效果的实现

效果:

鼠标移入小图:小黄块出现在小图里,同时大图取消隐藏
鼠标移出小图:小黄块和大图隐藏
鼠标在小图中移动:大图的显示区域为小图中小黄块所在的区域,形成一种放大的效果

思路:

鼠标移动事件中:
	1.小黄块设置拖拽
	2.将小黄块的坐标与大图中的显示坐标相关联

代码:

html:

<div class="box">
    <div class="small">
        <img src="./1.jpg" alt="" width="450px">
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="./1.jpg" alt="" width="600px">
    </div>
</div>

css:

.box {width: 450px;height: 250px;margin: 100px;border: solid #ccc;}
.small {position: relative;}
.mask {width: 50px;height: 50px;background: yellow;position: absolute;left: 0;top: 0;display: none;}
.big {width: 300px;height: 300px;position: absolute;left: 650px;top: 100px;overflow: hidden;display: none;}

js:

//1.获取节点
var box = document.querySelector(".box");
var small = document.querySelector(".small");
var mask = document.querySelector(".mask");
var big = document.querySelector(".big");
var imgS = document.querySelector(".small>img");
var imgB = document.querySelector(".big>img");
//2.移入small
small.onmouseenter = function() {
    mask.style.display = "block";
    big.style.display = "block";
};
//3.移出small
small.onmouseleave = function() {
    mask.style.display = "none";
    big.style.display = "none";
};
//4.移动small
small.onmousemove = function(eve) {
/*part1:小黄块设置拖拽*/
    //mask的位置=鼠标相对于文档的坐标-box的坐标-mask的宽高/2
    var l = eve.pageX - box.offsetLeft - mask.offsetWidth / 2;
    var t = eve.pageY - box.offsetTop - mask.offsetHeight / 2;
    //mask的边界值
    var l_max = small.offsetWidth - mask.offsetWidth;
    var t_max = small.offsetHeight - mask.offsetHeight;
    if (l < 0) l = 0;
    if (t < 0) t = 0;
    if (l > l_max) l = t_max;
    if (t > t_max) t = t_max;
    //mask的实时坐标
    mask.style.left = l + 'px';
    mask.style.top = t + 'px';

/*part2:拖拽与big>img的坐标相关联*/
    //最终目的:得到imgB.style.left和imgB.style.top
    //方法:令mask的移动距离/最大移动距离=imgB的移动距离/最大移动距离
   		 //即 l/l_max=imgB/imgB_max
    //那么imgB的移动距离=mask的移动距离/mask的最大移动距离*imgB的最大移动距离
    	//即 imgB=l/l_max*imgB_max
		
    //其中,imgB的最大移动距离
    var imgB_max_l = imgB.offsetWidth - big.offsetWidth;
    var imgB_max_t = imgB.offsetHeight - big.offsetHeight;
    //那么,imgB的移动距离
    var imgB_l = l / l_max * imgB_max_l;
    var imgB_t = t / t_max * imgB_max_t;
    //效果:mask覆盖到哪里,big中的imgB展示哪里
    imgB.style.left = imgB_l + "px";
    imgB.style.top = imgB_t + "px";
}

效果:

面向对象的放大镜

class showImg {
    constructor() {
     	//获取节点
        this.small = this.getEle('.small');
        this.mask = this.getEle('.mask');
        this.box = this.getEle('.box');
        this.big = this.getEle('.big');
        this.imgB = this.getEle(".big>img");
		
        this.bindEve();
    }

    //绑定事件
    bindEve() {
        //鼠标移入
        this.small.addEventListener('mouseenter', this.overFn.bind(this));
        //鼠标移动
        this.small.addEventListener('mousemove', this.moveFn.bind(this))
        //鼠标移出
        this.small.addEventListener('mouseleave', this.outFn.bind(this));
    }

    //鼠标移入时mask和big取消隐藏
    overFn() {
            this.mask.style.display = 'block';
            this.big.style.display = 'block';
        }
   //鼠标移出时mask和big设置隐藏
    outFn() {
        this.mask.style.display = 'none';
        this.big.style.display = 'none';
    }
    //鼠标移动
    moveFn(){
	/*part1:实现mask的拖拽*/
        
        //mask的实时位置=鼠标相对于文档的坐标-box的坐标-mask的宽高/2
        var l = eve.pageX - this.box.offsetLeft - this.mask.offsetWidth / 2;
        var t = eve.pageY - this.box.offsetTop - this.mask.offsetHeight / 2;
        
        //设置mask的边界值
        var l_max = this.small.offsetWidth - this.mask.offsetWidth;
        var t_max = this.small.offsetHeight - this.mask.offsetHeight;
        if (l < 0) l = 0;
        if (t < 0) t = 0;
        if (l > l_max) l = l_max;
        if (t > t_max) t = t_max;

        //位置设置
        this.mask.style.left = l + 'px';
        this.mask.style.top = t + 'px';
        
    /*part2:将mask的坐标与big的显示区域坐标相关联*/
        
 		//imgB能移动的最大范围
        var imgB_max_l = this.imgB.offsetWidth - this.big.offsetWidth;
        var imgB_max_t = this.imgB.offsetHeight - this.big.offsetHeight;
        
        //img移动的距离/ img移动的最大距离 = mask移动的距离 / mask移动的最大距离 
        var imgB_l = l / l_max * imgB_max_l;
        var imgB_t = t / t_max * imgB_max_t;
        
        // 位置设置
        this.imgB.style.left = -imgB_l + 'px';
        this.imgB.style.top = -imgB_t + 'px';
    }
    
    // 封装获取节点方法
    getEle(tag) {return document.querySelector(tag)}
}
new showImg;