landaiqing/HTML
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
landaiqing
2023-05-01 19:37:40 +08:00
commit da2c0fadf7
133 changed files with 29002 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
Html-Javascript/放大镜/index-c.html Normal file
View File

@@ -0,0 +1,145 @@
<!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>

129
Html-Javascript/放大镜/index.html Normal file
View File

@@ -0,0 +1,129 @@
<!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;
min-height: 100vh;
}
#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) {
kuai.style.display = "none";
// 事件源
// target 事件触发者
console.log(e);
// 容器中触发位置
// 浏览器可视范围 固定定位
// console.log(e.clientX, e.clientY); // 争对可视区域的位置
// 触发者 容器坐标 ie不支持
// console.log(e.layerX, e.layerY); // 争对事件者的 位置
// 触发者 容器坐标 ie支持
// console.log(e.offsetX, e.offsetY); // 争对事件者的 位置
let kuaiW = (boxS.clientWidth / 2);
let kuaiH = (boxS.clientHeight / 2);
console.log(kuaiW, kuaiH);
let x = e.offsetX - (boxS.clientWidth / 4);
let y = e.offsetY - (boxS.clientHeight / 4);
// 边界值的处理
// 左
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);
}
// 小盒子移动
// kuai.style.left = `${x}px`;
// kuai.style.top = `${y}px`;
kuai.style.left = x + 'px';
kuai.style.top = y + 'px';
setTimeout(function () {
kuai.style.display = "block";
}, 200);
}
</script>
</body>
</html>

BIN
Html-Javascript/放大镜/meinv.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 KiB