offset案例：仿京东放大镜

最新推荐文章于 2022-09-07 12:23:27 发布

jiangliuer20

最新推荐文章于 2022-09-07 12:23:27 发布

阅读量263

点赞数

文章标签： html js css javascript

本文链接：https://blog.csdn.net/WickhamChen/article/details/106932946

版权

案例分析

JD放大镜

整个案例可以分为三个功能模块
鼠标经过小图片盒子，黄色的遮挡层和大图片层显示，离开隐藏2个盒子功能
黄色的遮挡层跟随鼠标功能
移动黄色遮挡层，大图片跟随移动功能。

第3,4点具体细节

首先是获得鼠标在盒子的坐标。
之后把数值给遮挡层做为left 和 top 值。
此时用到鼠标移动事件，但是还是在小图片盒子内移动。
发现，遮挡层位置不对，需要再减去盒子自身高度和宽度的一半。
遮挡层不能超出小图片盒子范围
如果小于零，就把坐标设置为 0
如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
遮挡层的最大移动距离：小图片盒子宽度减去遮挡层盒子宽度

大图片的移动距离可以根据公式
$\frac{遮挡层移动距离}{遮挡层最大移动距离}$ = $\frac{大图片移动距离}{大图片最大移动距离}$

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			img {border: 0;vertical-align: middle;}
			.box {
				position: relative;
				width: 398px;;
				height: 398px;
				margin: 100px;
				border: 1px solid #ccc;
			}
			.mask {
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				width: 300px;
				height: 300px;
				background-color: #fede4f;
				opacity: .5;
				border: 1px solid #ccc;
				cursor: move;
			}
			.big {
				display: none;
				position: absolute;
				left: 410px;
				top: 0;
				width: 500px;
				height: 500px;
				border: 1px solid #ccc;
				overflow: hidden;
				z-index: 999;
			}
			.bigImg {
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="box_img.png">
			<div class="mask"></div>
			<div class="big">
				<img src="big.jpg" class="bigImg">
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.addEventListener('load',function(){
			var box = document.querySelector('.box');
			var mask = document.querySelector('.mask');
			var big = document.querySelector('.big');
			//1. 当我们鼠标经过 box 就显示 和 隐藏 mask 遮挡层 和 big 大盒子
			
			box.addEventListener('mouseover',function(){
				mask.style.display = 'block';
				big.style.display = 'block';
			})
			box.addEventListener('mouseout',function(){
				mask.style.display = 'none';
				big.style.display = 'none';
			})
			//2. 鼠标移动的时候，让黄色的盒子跟着鼠标走
			box.addEventListener('mousemove',function(e){
				// (1) 先计算鼠标在盒子内的坐标
				var x = e.pageX - box.offsetLeft;
				var y = e.pageY - box.offsetTop;
				// console.log(x,y)
				// (2) 减去盒子高度, 300 的一半,150 就是我们mask 的最终left top 的值了
				// (3) mask 移动的距离
				var maskX = x - mask.offsetWidth / 2;
				var maskY = y - mask.offsetHeight / 2;
				// (4) 如果x 坐标小于了0 就让他停在0 的位置
				// 遮挡层的最大移动距离
				var maskMax = box.offsetWidth - mask.offsetWidth;
				if (maskX <= 0) {
					maskX = 0;
				} else if (maskX >= maskMax) {
					maskX = maskMax;
				}
				if (maskY <= 0) {
					maskY = 0;
				} else if (maskY >= maskMax) {
					maskY = maskMax;
				}
				mask.style.left = maskX + 'px';
				mask.style.top = maskY + 'px';
				// 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
				// 大图
				var bigIMg = document.querySelector('.bigImg');
				// 大图片最大移动距离
				var bigMax = bigIMg.offsetWidth - big.offsetWidth;
				// 大图片的移动距离 X Y
				var bigX = maskX * bigMax / maskMax;
				var bigY = maskY * bigMax / maskMax;
				bigIMg.style.left = -bigX + 'px';
				bigIMg.style.top = -bigY + 'px';
			})
		})
	</script>
</html>

jiangliuer20

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
offset案例：仿京东放大镜

案例分析整个案例可以分为三个功能模块鼠标经过小图片盒子，黄色的遮挡层和大图片层显示，离开隐藏2个盒子功能黄色的遮挡层跟随鼠标功能移动黄色遮挡层，大图片跟随移动功能。第3,4点具体细节首先是获得鼠标在盒子的坐标。之后把数值给遮挡层做为left 和 top 值。此时用到鼠标移动事件，但是还是在小图片盒子内移动。发现，遮挡层位置不对，需要再减去盒子自身高度和宽度的一半。遮挡层不能超出小图片盒子范围如果小于零，就把坐标设置为 0如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动
复制链接

扫一扫