关于放大镜的总结

再写商品详情页面的时候会用到放大镜的效果来查看商品图片的物品

html部分
<div class="fdj">
            <div class="small">
                	<img src="" alt="">//这个是查看的原图
               	 	<div class = 'mask'></div>//这个是查看的模糊块
            </div>
            <div class="big">
                <img class = 'big_img' src="" alt="">//这个是放大了的图片
            </div>
</div>

css部分
在这里 我用的是一张图片 只是把放大看的图片的宽高扩大了2倍
如果你用的两张图片你就要算出他们的比例关系
小模糊快的宽高 / 小图的宽高 = 放大图片的容器的宽高 / 大图片的宽高

从而设置大图片的宽高

* {
		margin: 0;
		padding: 0;
	}

#fdj {
		width: 400px;
		height: 400px;
		position: relative;
}

.small {
		
		width: 400px;
		height: 400px;
}

.small img {
		width: 400px;
		height: 400px;

}
.mask {
		width: 200px;
		height: 200px;
		background: rgba(255, 255, 0, 0.3);
		position: absolute;
		left: 0px;
		top: 0px;
		display: none;
}

.big {
		position: absolute;
		height: 418px;
		width: 418px;
		left: 450px;
		top: 0;
		overflow: hidden;
		display: none;

}

.big_img {
		width:800px;
		height:800px;
		position: absolute;
		left: 0;
		top: 0;
}

js部分

		//先获取dom对象
		let mask = document.querySelector('.mask')
        let fdj = document.querySelector('.fdj')
        let bigImg = document.querySelector('.big_img')
        let rightbox = document.querySelector('.big')
        //给外层容器绑定移入事件
        fdj.onmouseenter = function () {
            mask.style.display = 'block'//移入的时候让模糊快出现
            rightbox.style.display= ' block'//让放大照片的容器也出现
            //绑定在外容器 fdj 中移动的事件
            fdj.onmousemove = (e) => {
                e = e || window.event // 兼容事件源
                let offsetx = e.pageX - fdj.offsetLeft  
                //用鼠标在页面上的横坐标减去fdj这个容器在body中的横向偏移量 就等于 鼠标在fdj这个容器中的横向偏移量 。
                //offsetLeft 是相对于定位的父级元素的偏移量 如果所有的上层元素都没有定位属性，则是相对于body来计算
                let offsety = e.pageY - fdj.offsetTop//同上  纵轴偏移量
                
                let maskX = offsetx - mask.offsetWidth / 2  
                //offsetWidth 用来获取元素的宽度 除以2得到宽度的一半，再用刚才获取到的偏移量减去 模糊块宽度的一半 
                //再把这个横向偏移量赋值给拥有绝对定位的模糊快的left属性
                let maskY = offsety - mask.offsetHeight / 2
                 //再把这个纵向偏移量值赋给拥有绝对定位的模糊快的top属性
                 //这样当你移动鼠标时模糊快会随着你一块移动并且鼠标的位置在
                 模糊块的中心位置
                 
                 //下面时判断四边的临界值
                if (maskX >= fdj.offsetWidth - mask.offsetWidth) {
                    maskX = fdj.offsetWidth - mask.offsetWidth
                }//当你赋值给模糊快的坐标大于等于 fdj容器的宽度减去模糊快的宽度时 就让这个横坐标 等于这个值  这个也就是右边临界值的问题
                if (maskY >= fdj.offsetHeight - mask.offsetHeight) {
                    maskY = fdj.offsetHeight - mask.offsetHeight
                }//这个是下边临界值的问题 如果横坐标超过最大值就会一直等于最大值
                if (maskX <= 0) {
                    maskX = 0
                }//这个时左边的临界值 如果你鼠标的横坐标减去 模糊块的一半宽度小于等于零是 就让 这个值一直等于零
                if (maskY <= 0) {
                    maskY = 0
                }//这个是在上边的临界值

                //把坐标给模糊块让其中心在鼠标的位置
                mask.style.left = maskX + 'px'
                mask.style.top = maskY + 'px'//
                
                //这里是大图片的坐标 因为我自己设置的大图片是小图片的2倍所以，他移动的距离是小模糊快的二倍 而且方向相反
                //因为小模糊块向下移动是查看小图片的下方
                //而如果要大图片移动到相对的地方就要把大图片向上移动才能看到下面的内容
                bigImg.style.left = -maskX*2 + 'px'
                bigImg.style.top = -maskY*2 + 'px'
            }
           //这里绑定移出事件  当移出时 让模糊快和大图片的容器都消失
            fdj.onmouseleave = function () {
                mask.style.display = 'none'
                rightbox.style.display= 'none'
            }
        }