前端放大镜特效
Posted wywd
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端放大镜特效相关的知识，希望对你有一定的参考价值。
pc端购物网站的商品有些具有放大镜特效，自己简单实现了一下
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="wrap">
<div class="small_box">
<img src="images/c2.jpg" alt="">
<span id="mask"></span>
</div>
<div class="big_box">
<img id="bigImg" src="images/c1.jpg" alt="">
</div>
</div>
<div class="list">
<img src="images/c2.jpg" alt="">
<img src="images/d2.jpg" alt="">
<img src="images/g2.jpg" alt="">
</div>
<script src="index.js"></script>
</body>
</html>
css部分·
* {
padding: 0;
margin: 0;
border: none;
}
img {
vertical-align: top;
}
#wrap {
width: 350px;
height: 350px;
background: #e71208;
margin: 50px 0 0 50px;
position: relative;
}
.small_box {
width: 100%;
height: 100%;
border: 1px solid #ccc;
position: relative;
}
#mask {
width: 100px;
height: 100px;
background: rgba(255, 255, 0, .4);
position: absolute;
left: 0;
top: 0;
cursor: move;
display: none;
}
.big_box {
width: 500px;
height: 500px;
border: 1px solid #ccc;
position: absolute;
top: 0;
left: 360px;
overflow: hidden;
display: none;
}
.big_box img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.list {
width: 450px;
margin-top: 40px;
text-align: center;
}
.list img {
width: 100px;
height: 100px;
border: 1px solid rebeccapurple;
cursor: pointer;
margin: 5px;
}
js部分
window.onload = function() {
let wrap = document.getElementById("wrap")
let bigBox = document.getElementsByClassName("big_box")[0]
let smallBox = document.getElementsByClassName("small_box")[0]
let mask = document.getElementById("mask")
let bigImg = document.getElementById("bigImg")
let list = document.getElementsByClassName("list").children
//监听鼠标进入小盒子
smallBox.onmouseover = function() {
mask.style.display = "block"
bigBox.style.display = "block"
}
//监听鼠标移动
smallBox.onmousemove = function() {
let e = window.event || arguments[0]
//求出鼠标的坐标
let pointX = e.clientX - smallBox.offsetParent.offsetLeft
let pointY = e.clientY - smallBox.offsetParent.offsetTop
//让放大镜移动
//让鼠标在mask中心
pointX = pointX - mask.offsetWidth * 0.5
pointY = pointY - mask.offsetHeight * 0.5
//边界检测
if (pointX < 0) {
pointX = 0
} else if (pointX >= smallBox.offsetWidth - mask.offsetWidth) {
pointX = smallBox.offsetWidth - mask.offsetWidth
}
if (pointY < 0) {
pointY = 0
} else if (pointY >= smallBox.offsetHeight - mask.offsetHeight) {
pointY = smallBox.offsetHeight - mask.offsetHeight
}
mask.style.left = pointX + "px"
mask.style.top = pointY + "px"
//大图移动
bigImg.style.left = -pointX / (smallBox.offsetWidth / bigBox.offsetWidth) + "px"
bigImg.style.top = -pointY / (smallBox.offsetHeight / bigBox.offsetHeight) + "px"
}
//监听鼠标离开小盒子
smallBox.onmouseout = function() {
mask.style.display = "none"
bigBox.style.display = "none"
}
}
放大镜大图移动公式
smallX/bigX（坐标）=smallbox.width/大图宽度
bigX=smallX/(smallbox.width/大图宽度)
smallX/bigX（坐标）=smallbox.width/大图宽度
bigX=smallX/(smallbox.width/大图宽度)
以上是关于前端放大镜特效的主要内容，如果未能解决你的问题，请参考以下文章