网站建设属于哪个税收服务编码站长工具域名查询社区
题九：放大镜效果
要求：
1.鼠标移至图片上方，鼠标周围出现黄色的的正方形框，黄色矩形 框会随着鼠标的移动而移动；
2.将黄色正方形框里的内容的长和宽均放大2.4倍，并在图片右边进 行显示。
原理：
- 首先把要放大的图片先size*2.4倍，位置要从零开始，绑定事件mousemove一定不要写错。
- 定位鼠标在视口的位置，在减去图片离视口的位置，就是鼠标在图片中的位置，高度的话还要减去滚动卷去的高度。
- 最后在图片的范围内，实现放大效果（加-才能网正方向去）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.con {width: 100%;height: 1000px;}.small {width: 400px;height: 400px;background-image: url(./任务/交互图片/9.jpg);background-repeat: no-repeat;background-size: cover;border: 1px solid black;display: inline-block;}.big {width: 400px;height: 400px;border: 1px solid black;display: inline-block;background-image: url(./任务/交互图片/9.jpg);background-repeat: no-repeat;background-size: 960px ,960px;background-position: 0,0;}</style>
</head>
<body><div class="con"><div class="small"><div class="black"></div></div><div class="big"></div></div><script>const small = document.querySelector('.small');const big = document.querySelector('.big');small.addEventListener('mousemove', function (e) {const rect = small.getBoundingClientRect();let x = e.pageX - rect.left;let y = e.pageY - rect.top - document.documentElement.scrollTop;if (x >= 0 && x <= rect.width && y >= 0 && y <= rect.height) {big.style.backgroundPositionX = -x * 2.4 + 'px';big.style.backgroundPositionY = -y * 2.4 + 'px';}});</script>
</body>
</html>
视频：
放大镜效果