<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 去除图片的3px */
img {
vertical-align: top;
}
/* 容器样式 */
.container {
350px;
height: 350px;
margin:100px;
border: 1px solid #ccc;
position: relative;
}
/* 鼠标盒子样式 */
.mouse {
position: relative;
}
/* 大鼠标盒子样式 */
.mouseBigSize {
450px;
height: 450px;
position: absolute;
top: 0;
left: 370px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
/* 大鼠标盒子里面图片样式 */
.mouseBigSize img {
position: absolute;
top: 0;
left: 0;
}
/* 遮罩层样式 */
.mask {
100px;
height: 100px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
</style>
</head>
<body>
<div class="container">
<!-- 小鼠标 -->
<div class="mouse">
<img src="./images/mouse.jpg" alt="">
<!-- 遮罩层 -->
<div class="mask"></div>
</div>
<!-- 大鼠标 -->
<div class="mouseBigSize">
<img src="./images/mouseBigSize.jpg" alt="">
</div>
</div>
<script>
// 获取DOM元素
let container = document.getElementsByClassName("container")[0]; // 获得最大的盒子
let mouse = document.getElementsByClassName("mouse")[0]; // 获取小鼠标盒子
let mouseBigSize = document.getElementsByClassName("mouseBigSize")[0]; // 获取大鼠标盒子
let bigImg = mouseBigSize.children[0]; // 获取大盒子里面的图片
let mask = document.getElementsByClassName("mask")[0]; // 获取遮罩层
// 给小盒子添加mouseover事件
mouse.onmouseover = function(){
mask.style.display = "block";
mouseBigSize.style.display = "block";
}
// 给小盒子添加mouseout事件
mouse.onmouseout = function(){
mask.style.display = "none";
mouseBigSize.style.display = "none";
}
// 初始化x轴和y轴
let x = 0,y = 0;
// 给小盒子添加mousemove事件
mouse.onmousemove = function(event){
x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth / 2;
y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight / 2;
// 进行边界判断
if(x < 0)
{
x = 0;
}
if(x > mouse.offsetWidth - mask.offsetWidth)
{
x = mouse.offsetWidth - mask.offsetWidth;
}
if(y < 0)
{
y = 0;
}
if(y > mouse.offsetHeight - mask.offsetHeight)
{
y = mouse.offsetHeight - mask.offsetHeight;
}
// 重新给遮罩层的left和top赋值
mask.style.left = x + "px";
mask.style.top = y + "px";
/*
计算：弟弟一顿吃2个馒头，哥哥一顿吃4个馒头，问：弟弟今天吃了3个馒头，哥哥应该吃几个馒头？
计算出他们的倍数 4 / 2 2倍
3 * 2 == 6个
*/
/*
大图盒子 / 小图盒子 = 倍数
我们 再小图移动的距离 * 倍数 == 大图的位置
*/
bigImg.style.left = -x * mouseBigSize.offsetWidth / mouse.offsetWidth + "px";
bigImg.style.top = -y * mouseBigSize.offsetHeight / mouse.offsetHeight + "px";
}
</script>
</body>
</html>