标签：box 盒子 放大镜 js 案例 var 移动 left
分析和解释都在代码行上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
margin-left: 100px;
height: 1000px;
}
.box_left {
position: relative;
width: 300px;
}
.box_left>img {
width: 300px;
}
.box_right {
display: none;
position: absolute;
top: 0;
left: 410px;
width: 400px;
height: 600px;
border: 1px solid #333;
overflow: hidden;
}
.box_right>img {
position: absolute;
left: 0;
top: 0;
/* width: 600px; */
/* width: 300px; */
}
.meak {
display: none;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: yellow;
opacity: .5;
}
</style>
</head>
<body>
<div class="box">
<div class="box_left">
<img src="./imgaes/1_poster.4aa4c624.jpg" alt="">
<div class="meak"></div>
</div>
<div class="box_right">
<img id="banimg" src="./imgaes/1_poster.4aa4c624.jpg" alt="">
</div>
</div>
<script>
// 案例分析
// 鼠标移入时 放大镜显示（黄色盒子 和 放大的图显示
// 因 放大镜 定位在了 产品图的上面 他的 lef 和 top 作用于他的父盒子
// 我们需要计算出 鼠标在盒子内的 坐标 然后把坐标 给 放大镜 的 left 和 top
// 我们需要让 放大镜 在产品图 盒子里进行移动 并显示 和隐藏
// 大图分析案例在下面对应的代码行
// 先获取属性
var box_left = document.querySelector('.box_left')
var meak = document.querySelector('.meak')
var box_right = document.querySelector('.box_right')
var banimg = document.querySelector('#banimg')
// 注册事件 鼠标移入事件
box_left.addEventListener('mouseover', function () {
meak.style.display = 'block'
box_right.style.display = 'block'
})
// 注册事件 鼠标移动事件
box_left.addEventListener('mousemove', function (e) {
// 获取鼠标在盒子内的坐标
var x = e.pageX - this.offsetLeft
var y = e.pageY - this.offsetTop
// 让放大镜盒子 自身向 x 和 y 方向移动自身宽和高的一半 从而得到盒子的移动距离
var meakx = x - meak.offsetWidth / 2
var meaky = y - meak.offsetHeight / 2
// 这里计算出 放大镜在这个 盒子移动的极限距离 （也就是放大镜不能移动出这个盒子）
// 用 产品图的 宽和高 减去 盒子的宽和高 就可以得到 盒子的 left 和 top 的最大值
var widthX = this.offsetWidth - meak.offsetWidth
var heightY = this.offsetHeight - meak.offsetHeight
// 然后用 if 来判断
// 当盒子的 x 小于等于0 就让 盒子的 x 值为 0
// 当盒子的 y 大于等于的 left 的极限值 就让 y = left
if (meakx <= 0) {
meakx = 0
} else if (meakx >= widthX) {
meakx = widthX
}
if (meaky <= 0) {
meaky = 0
} else if (meaky >= heightY) {
meaky = heightY
}
meak.style.left = meakx + 'px'
meak.style.top = meaky + 'px'
// 现在我们要让大图也跟着移动
// 我们可以利用 产品图与大盒子的比例来判断
// 放大镜的移动距离 大盒子的移动距离
// ------------------ == ------------------
// 放大镜的极限移动距离 大盒子的极限移动距离
// 现在我们已知的条件有
// 放大镜的移动距离、放大镜的极限移动距离、大盒子的极限移动距离
// 所以我们可以推算出
// 大盒子的移动移动距离 = 放大镜的移动距离 * 大盒子的极限移动距离 / 放大镜的极限移动距离
var maximgX = box_right.offsetWidth - banimg.offsetWidth // 大盒子的极限距离 X
var maxX = meakx * maximgX / widthX // 大盒子的移动移动距离 X
var maximgY = box_right.offsetHeight - banimg.offsetHeight // 大盒子的极限距离 Y
var maxY = meaky * maximgY / heightY // 大盒子的移动移动距离 Y
// 这里说明一下 大图在移动的时候是与放大镜反方向移动的 所以移动的值为负值
// 我的产品图宽为 300 所以给大图设置了 600 的宽 (当然你不设置也没有问题,但前提得是你的大图的宽高一定要大于产品图,如果你的大图 宽高小于或等于了 产品图 那么在 maxX 和 maxY 的面膜要加 - ，将 left 和 top 变成负值)
banimg.style.left = maxX + 'px'
banimg.style.top = maxY + 'px'
})
// 注册事件 移出事件
box_left.addEventListener('mouseout', function () {
meak.style.display = 'none'
box_right.style.display = 'none'
})
</script>
</body>
</html>
标签：box,盒子,放大镜,js,案例,var,移动,left 来源： https://blog.csdn.net/A951299034/article/details/120734242
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。