145 lines
3.5 KiB
HTML
145 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>放大镜</title>
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
#app {
|
|
padding-left: 20px;
|
|
padding-top: 20px;
|
|
position: relative;
|
|
top: 10px;
|
|
}
|
|
|
|
.box-s {
|
|
width: 300px;
|
|
height: 187.5px;
|
|
position: relative;
|
|
}
|
|
|
|
.box-s img {
|
|
width: 100%;
|
|
}
|
|
|
|
.kuai {
|
|
width: calc(300px * .5);
|
|
height: calc(187.5px * .5);
|
|
background-color: rgba(170, 102, 47, 0.3);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
cursor: move;
|
|
}
|
|
|
|
.box-l {
|
|
position: absolute;
|
|
top: 30px;
|
|
left: 350px;
|
|
width: calc(300px * 2);
|
|
height: calc(187.5px * 2);
|
|
background-color: pink;
|
|
background-image: url(./meinv.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: 1200px 750px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="app">
|
|
<div class="box-s">
|
|
<img src="./meinv.jpg" alt="">
|
|
<span class="kuai"></span>
|
|
</div>
|
|
<div class="box-l"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// 放大镜 00
|
|
let boxS = document.querySelector(".box-s");
|
|
let kuai = document.querySelector(".kuai")
|
|
let boxL = document.querySelector(".box-l");
|
|
|
|
// 01- 小图片 块动
|
|
console.dir(boxS);
|
|
boxS.onmousemove = function (e) {
|
|
// 事件源
|
|
// target 事件触发者
|
|
console.log(e);
|
|
// 容器中触发位置
|
|
// console.log(e.clientX, e.clientY); // 争对可视区域的位置
|
|
// console.log(e.offsetX, e.offsetY); // 争对事件者的 位置
|
|
|
|
|
|
|
|
// 边界值的处理
|
|
// let x = e.clientX - boxS.offsetLeft - (kuai.clientWidth / 2);
|
|
// let y = e.clientY - boxS.offsetTop - (kuai.clientHeight / 2);
|
|
|
|
let kuaiW = (boxS.clientWidth / 2);
|
|
let kuaiH = (boxS.clientHeight / 2);
|
|
|
|
kuai.style.display = "none";
|
|
let x = e.layerX - (kuaiW / 2);
|
|
let y = e.layerY - (kuaiH / 2);
|
|
console.log(e.layerX, e.layerY);
|
|
console.log(x, y);
|
|
// 左
|
|
if (x <= 0) {
|
|
x = 0;
|
|
}
|
|
// 上
|
|
if (y <= 0) {
|
|
y = 0;
|
|
}
|
|
// 右
|
|
if (x >= (boxS.clientWidth - kuaiW)) {
|
|
x = (boxS.clientWidth - kuaiW);
|
|
}
|
|
// 下
|
|
if (y >= (boxS.clientHeight - kuaiH)) {
|
|
y = (boxS.clientHeight - kuaiH);
|
|
}
|
|
|
|
// console.log(e.clientX, e.clientY);
|
|
|
|
// 大盒子图片移动
|
|
boxL.style.backgroundPosition = `${x * 4 * -1}px ${y * 4 * -1}px`
|
|
|
|
|
|
// 小盒子移动
|
|
kuai.style.left = `${x}px`;
|
|
kuai.style.top = `${y}px`;
|
|
kuai.style.display = "block";
|
|
}
|
|
|
|
|
|
boxS.onmouseleave = function () {
|
|
kuai.style.display = "none";
|
|
boxL.style.display = "none";
|
|
}
|
|
|
|
boxS.onmouseenter = function () {
|
|
kuai.style.display = "block";
|
|
boxL.style.display = "block";
|
|
}
|
|
|
|
|
|
// 02- 大图片动
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |