原生js实现放大镜效果
程序员文章站
2024-03-17 11:24:40
...
先来看一看效果吧!
初始是这样
鼠标滑过后图片本身会局部放大,右侧出现大图放大效果
1.HTML结构
<body>
<div>
<!-- 鼠标滑过原图时会有部分放大 -->
<p><img src="../images/3.jpg" alt=""></p>
<img src="../images/3.jpg" alt="">
</div>
<!-- 鼠标滑过原图右侧显示整体放大效果 -->
<section>
<img src="../images/3.jpg" alt="" id="img">
</section>
</body>2.css样式
<style>
body {
padding-left: 100px;
}
div,section {
margin-top: 30px;
margin-left: 10px;
float: left;
position: relative;
}
div,img {
height: 100%;
width: 100%;
display: block;
position: absolute;
}
div {
width: 230px;
height: 300px;
position: relative;
border-radius: 5px;
}
P img {
width: 500px;
height: 700px;
}
section {
width: 230px;
height: 300px;
left: 400px;
display: none;
background: blue;
position: absolute;
overflow: hidden;
border-radius: 5px;
}
section img {
width: 860px;
height: 1000px;
position: absolute;
overflow: hidden;
border-radius: 5px;
}
p {
width: 125px;
height: 125px;
background: orange;
margin: 0;
padding: 0;
border-radius: 5px;
box-shadow: 0 0 5px 0 orange;
display: none;
position: absolute;
z-index: 1;
overflow: hidden;
border-radius: 50%;
}
</style>3.JS部分
<script>
//获取标签
let box1 = document.querySelector("div"); //初始显示盒子
let box2 = box1.children[0]; //滑块
let sec = box1.nextElementSibling; //放大镜显示区域
let img = sec.children[0]; //大图图片
let imgS = box2.children[0];
//box1绑定鼠标移入事件
box1.addEventListener("mouseover", () => {
//1.1滑块显示
box2.style.display = "block";
sec.style.display = "block";
})
//box1绑定鼠标移动事件
box1.addEventListener("mousemove", (e) => {
let eve = e || window.event;
//1.2让滑块跟着鼠标移动 鼠标指针位置始终在滑块中间
let box2W = (box2.offsetWidth) / 2;
let box2H = (box2.offsetHeight) / 2;
// 鼠标在文档窗口的坐标
let mousX = eve.clientX;
let mousY = eve.clientY;
//父元素距可视窗口的距离
let box1L = box1.offsetLeft;
let box1T = box1.offsetTop;
//计算偏移量
let left = mousX - box1L - box2W;
let top = mousY - box1T - box2H;
//设置边界值
let l = box1.offsetWidth - box2W * 2;
let h = box1.offsetHeight - box2W * 2;
if (left < 0) left = 0;
if (top < 0) top = 0;
if (left > l) left = l;
if (top > h) top = h;
//滑块动
box2.style.left = left + "px";
box2.style.top = top + "px";
// 设置大图
// 滑块覆盖到哪里,对应的大盒子里图片展示哪里
// 滑块移动的距离 / 滑块移动的最大距离 == img移动的距离 / img移动的最大距离
// img移动的距离 = mask移动的距离 / mask移动的最大距离 * img移动的最大距离
// 计算大图移动的最大距离
var daLeft = sec.offsetWidth - img.offsetWidth;
var daTop = sec.offsetHeight - img.offsetWidth;
//img移动的距离
var imgleft = left / l * daLeft;
var imgTop = top / h * daTop;
//img移动
img.style.left = imgleft + "px";
img.style.top = imgTop + "px";
imgS.style.left = imgleft + "px";
imgS.style.top = imgTop + "px";
})
//box2绑定鼠标移出效果
box1.addEventListener("mouseout", () => {
box2.style.display = "none";
sec.style.display = "none";
})
</script>