目录
offsetWidth： 除了外边距(margin)以外，所有的宽度(高度)之和（当前元素）
offsetHeight:元素的像素高度 包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数
大致步骤：
首先我们应该先构思好布局：
- 先有一个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%相对应，建议以后放大倍数为2n
big.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>放大镜就分享到这里，如有问题，欢迎指出~~~~~~如果对你有帮助欢迎点赞收藏一波哟
本文含有隐藏内容，请 开通VIP 后查看