前端学习笔记之放大镜
最近学习放大镜，用Jquery的方式去实现，和大家交流一下！
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.container {
width: 862px;
height: 530px;
margin: 30px auto 0px;
border: solid 2px;
display: flex;
flex-wrap: wrap;
}
.middle {
width: 430px;
height: 430px;
border-right: 2px solid;
border-bottom: 2px solid;
position: relative;
}
.big {
width: 430px;
height: 430px;
border-bottom: 2px solid;
}
.small {
width: 862px;
height: 98px;
display: flex;
justify-content: center;
align-items: center;
}
.small>ul {
width: 184px;
height: 63px;
display: flex;
}
.small>ul>li {
width: 60px;
height: 60px;
border: 1px solid;
}
.small>ul>li:nth-child(2) {
border-right: none;
border-left: none;
}
.middle>.shandow {
width: 231px;
height: 231px;
background: rgba(0,0,0,.3);
display: none;
position: absolute;
left:0;
top: 0;
}
</style>
</head>
<body>
<div class="container">
<div data-index=A class="middle" style="background: url('./img/imgA_2.jpg');">
<p class="shandow"></p>
</div>
<div class="big" style="background: transparent;"></div>
<div class="small">
<ul>
<li data-index=A style="background: url('./img/imgA_1.jpg');"></li>
<li data-index=B style="background: url('./img/imgB_1.jpg');"></li>
<li data-index=C style="background: url('./img/imgC_1.jpg');"></li>
</ul>
</div>
</div>
<script src="../../../util/jquery-3.3.1.js"></script>
<script>
const $s = $(".small");
const $m = $(".middle");
const $b = $(".big");
const $shandow = $(".middle>.shandow");
$s.on("mouseover", function (e) {
const t = e.target;
if (t.nodeName === "LI") {
$m.css("background", `url('./img/img${t.dataset.index}_2.jpg')`);
$m.attr("data-index", t.dataset.index);
}
})
$m.on("mouseenter", function (e) {
$b.css("background", `url('./img/img${this.dataset.index}_3.jpg')`);
$shandow.css("display", "block");
})
$m.on("mouseleave", function (e) {
$b.css("background", "transparent");
$shandow.css("display", "none");
})
$m.on("mousemove", function (e) {
const {top,left} = $m.position();
const {pageX,pageY} = e;
let [x,y] = [pageX-left-2-231/2,pageY-top-2-231/2];
$b.css("background", `url('./img/img${this.dataset.index}_3.jpg')`);
if(x<=0){
x = 0;
}else if(x+231>=430){
x=430 - 231;
}
if(y<=0){
y = 0;
}else if(y+231>=430){
y=430 - 231;
}
$shandow.css({
"display":"block",
left:x,
top:y
});
console.log(-800*x/430);
$b.css({
backgroundPosition:`${-800*x/430}px -${800*x/430}px`
});
})
</script>
</body>
</html>
