js实现放大镜（详细注释）

大致步骤：

hover的小知识点：

offsetX：鼠标坐标到元素的左侧的距离

offsetWidth：除了外边距(margin)以外，所有的宽度(高度)之和（当前元素）

offsetHeight:元素的像素高度包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数

实现效果：

完整HTML代码：

完整VUE代码：

大致步骤：

首先我们应该先构思好布局：

先有一个div存放原始图片
再有一个div存放放大后的图片
来一个遮罩层让用户知道自己正在观察哪个区域，并且实现遮罩层跟随鼠标移动而移动
显示放大后的图片

OK，大致就是这几个步骤。

这里在说一下关于代码中的css布局最后三行，在这里我踩了很大一个坑，因为在页面结构中big类是event的邻居兄弟类，而mask类也是兄弟类但是不邻接。并且这两个类的display我最初设置的是none，就是最初没有结构不显示。在我写代码时我使用.event:hover .big,.mask{display:block}发现一直没有效果，并且我开始并没有发现是这里错了，导致纠结了很久。

 .event1:hover + .big ,.event1:hover ~ .mask {display: block;}

hover的小知识点：

hover后面一般都是控制子元素，无法控制父元素的效果
hover更改同级（兄弟）元素属性：
更改兄弟元素又分两种情况：

需要更改的兄弟元素是当前元素的相邻元素，也就是说紧接着当前元素，在hover后面使用‘+’号链接就行，就是 .event1:hover + .big

需要改变的兄弟元素不是当前元素的邻接元素： .event1:hover ~ .mask

offsetX：鼠标坐标到元素的左侧的距离

offsetWidth：除了外边距(margin)以外，所有的宽度(高度)之和（当前元素）

offsetHeight:元素的像素高度包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数

url图片地址改成自己的啊，不要和我一样！！！！！

实现效果：

图片本身就比较糊，不是放大的原因

完整HTML代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>放大镜实现</title></head><body><div class="spec-preview"><img src="./111jpg.jpg" /><div class="event1" id="event1" onmousemove="mouseMove(event)"></div><div class="big"><img src="./111jpg.jpg"  id="bigImg"/></div><div class="mask"></div></div></body><style>.spec-preview {position: relative;width: 400px;height: 400px;border: 1px solid #ccc;}.spec-preview>img {width: 100%;height: 100%;}.event1 {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 998;}.mask {width: 50%;height: 50%;background-color: rgba(0, 255, 0, 0.3);position: absolute;left: 0;top: 0;display: none;}.big {width: 100%;height: 100%;position: absolute;top: -1px;left: 105%;border: 1px solid rgb(212, 11, 11);/* //把下面这行代码去掉，试着理解为什么上面需要乘以-2 */overflow: hidden;z-index: 998;display: none;background: white;}.big img {/* 这里的宽高实现放大两倍的效果 */width: 200%;max-width: 200%;height: 200%;position: absolute;left: 0;top: 0;}.event1:hover + .big ,.event1:hover ~ .mask {display: block;}</style><script>// var event1=document.getElementById('event1')// console.log(event1)var big=document.getElementById('bigImg')//获取遮罩层dom实现遮罩层跟随鼠标位置移动var mask = document.querySelector('.mask');function mouseMove(event){// console.log(big.style)//offsetX：鼠标坐标到元素的左侧的距离//offsetWidth 除了外边距(margin)以外，所有的宽度(高度)之和let left = event.offsetX - mask.offsetWidth / 2;//offsetY：鼠标坐标到元素的顶部的距离//offsetHeight:元素的像素高度 包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数let top = event.offsetY - mask.offsetHeight / 2;//  约束范围,保证光标在div范围内，都是以父盒子div为参考对象的//超出图片左侧if (left <= 0) left = 0;//超出图片右侧if (left >= mask.offsetWidth) left = mask.offsetWidth;if (top <= 0) top = 0;if (top >= mask.offsetHeight) top = mask.offsetHeight;//  修改元素的left|top属性值//遮罩层mask.style.left = left + "px";mask.style.top = top + "px";//放大镜，你向左移动鼠标，图片就是向右移动，运动方向是相反的//与css中width：200%，height：200%相对应，建议以后放大倍数为2nbig.style.left = -2*left + "px";big.style.top =  -2*top + "px";}</script>
</html>

认识到一个元素能够跟随鼠标移动而移动那么肯定是使用了定位，这是必须得知道的

完整VUE代码：

:src的意思是动态绑定一个图片资源地址

<template><div class="spec-preview"><img :src="imgObj.imgUrl" /><div class="event" @mousemove="handler"></div><div class="big"><img :src="imgObj.imgUrl" ref="big" /></div><div class="mask" ref="mask"></div></div>
</template><script>export default {methods:{handler(event){let big=this.$refs.big//获取遮罩层dom实现遮罩层跟随鼠标位置移动let mask=this.$refs.mask;//offsetX：鼠标坐标到元素的左侧的距离//offsetWidth 除了外边距(margin)以外，所有的宽度(高度)之和let left=event.offsetX-mask.offsetWidth/2;//offsetY：鼠标坐标到元素的顶部的距离//offsetHeight:元素的像素高度 包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数let top=event.offsetY-mask.offsetHeight/2;//  约束范围,保证光标在div范围内，都是以父盒子div为参考对象的if(left<=0)left=0;if(left>=mask.offsetWidth)left=mask.offsetWidth;if(top<=0)top=0;if(top>=mask.offsetHeight)top=mask.offsetHeight//  修改元素的left|top属性值//遮罩层mask.style.left=left+'px';mask.style.top=top+'px'//放大镜，你向左移动鼠标，图片就是向右移动，运动方向是相反的big.style.left=-2*left+'px'big.style.top=-2*top+'px'}}
}</script>

放大镜就分享到这里，如有问题，欢迎指出~~~~~~如果对你有帮助欢迎点赞收藏一波哟