JS之放大镜案例

作者：算法编织者2 | 2024-01-30 19:46:13

踩

JS之放大镜案例

让我为大家带来一个关于放大镜的实现方法吧！

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.box {
			margin: 150px;
			overflow: hidden;
		}
		.big {
			display: none;
			width: 400px;
			height: 400px;
			margin-left: 10px;
			overflow: hidden;
			position: relative;
		}
		.small {
			width: 400px;
			height: 400px;
			float: left;
			position: relative;
		}
		.shadow {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			width: 200px;
			height: 200px;
			background-color: #fff;
			opacity: 0.5;
		}

		.big img {
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
</head>

<body>
	<!-- 一个大盒子 -->
	<div class="box">
		<!-- 小图片的盒子 -->
		<div class="small">
			<!-- 小图片 -->
			<img style="width: 400px; height: 400px;" src="1.jpg" alt="">
			<!-- 阴影 -->
			<span class="shadow"></span>
		</div>
		<!-- 大图片的盒子 -->
		<div class="big">
			<!-- 大图片 相当于2倍图 -->
			<img style="width: 800px; height: 800px;" src="2.jpg" alt="">
		</div>
	</div>
</body>
<script>
	//获取box
	var box = document.querySelector(".box")
	//获取小图片盒子
	var small = document.querySelector(".small")
	//获取阴影
	var shadow = document.querySelector(".shadow")
	// console.log(shadow);
	//获取大图片盒子
	var big = document.querySelector(".big")
	//获取图片
	var img = document.querySelector(".big img")
	//给小图片盒子设置移入事件
	small.onmouseover = function () {
		//移入阴影盒子显示
		shadow.style.display = "block"
		//移入大图片盒子显示
		big.style.display = "block"
	}
	//小盒子移出事件
	small.onmouseout = function () {
		//移出阴影盒子隐藏
		shadow.style.display = "none"
		//移出大盒子隐藏
		big.style.display = "none"
	}
	//小盒子鼠标移动事件
	small.onmousemove = function (e) {
		//鼠标的距离 - 盒子距离浏览器的距离 - 盒子自身一半的距离 = 向左或者向上距离阴影盒子的距离
		var x = e.clientX - box.offsetLeft - shadow.offsetWidth / 2
		var y = e.clientY - box.offsetTop - shadow.offsetHeight / 2
		if (x < 0) {
			x = 0
		} else if (x > small.offsetWidth - shadow.offsetWidth) {
			x = small.offsetWidth - shadow.offsetWidth
		}
		if (y < 0) {
			y = 0
		} else if (y > small.offsetHeight - shadow.offsetHeight) {
			y = small.offsetHeight - shadow.offsetHeight
		}
		shadow.style.left = x + "px"
		shadow.style.top = y + "px"
		//因为图片是从右向左移,所以要是-的x和y,大图片比小的大2倍,乘于2
		img.style.left = -x * 2 + "px"
		img.style.top = -y * 2 + "px"
	}
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/48798