仿京东放大镜案例

最新推荐文章于 2022-06-02 16:35:52 发布

南逗

最新推荐文章于 2022-06-02 16:35:52 发布

阅读量412

点赞数

本文链接：https://blog.csdn.net/weixin_46217523/article/details/105951219

版权

分成三个模块

模块一：鼠标经过黄色小盒子 mask ,黄色的遮挡层和大图片盒子 big 显示，离开则隐藏两个盒子
1.就是显示和隐藏
模块二：黄色的遮挡层会跟随鼠标走
1.把鼠标坐标给遮挡层不合适，因为遮挡层坐标以父盒子left为准
2.首先是获得鼠标在left盒子的坐标
3.之后把数值给黄色遮挡层作为left和top值
4.此时用到鼠标移动事件，但是还是在left盒子内移动
5.发现，遮挡层位置不对，需要减去left盒子自身高度和宽度的一半
6.遮挡层不能超过left盒子范围
7.如果小于0，就把坐标设置为0
8.如果大于黄色遮挡层最大的移动距离，就把坐标设置为最大的移动距离
9.黄色遮挡层的最大移动距离：left盒子宽度减去黄色遮挡层盒子宽度
模块三：移动黄色遮挡层，大图片跟随移动功能
1.求大图片的移动距离公式
遮挡层移动距离/遮挡层最大移动距离 = 大图片移动距离/大图片最大移动距离
大图片移动距离= 遮挡层移动距离*大图片最大移动距离 / 遮挡层的最大移动距离

HTML代码如下
小图是450px450px 大图是800px800px**


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/fdj.js"></script>
</head>
<style>
	.top{
		height: 100px;
		width: 100%;
		background:#C87B7C;
	}
	.body{
		margin: 12px 30px;
	}
	.left{
		position: relative;
		width:450px;
		height: 450px;
		border: 1px solid red;
	}
	.mask{
		display: none;
		position: absolute;
		top:0;
		left: 0;
		width:300px;
		height: 300px;
		background: #E3B976;
		opacity: .5;
		cursor: move;
	}
	.big{
		display: none;
		width: 500px;
		height: 500px;
		position: absolute;
		left: 460px;
		top: 0;
		background: pink;
		border: 1px solid #ccc;
		overflow: hidden; 
	}
	.big_img{
		position: absolute;
		top:0;
		left: 0;
	}
</style>
<body>
	<div class="top"></div>
	<div class="body">
		<div class="left">
			<img src="img/30f4e274e2596cfe (1).jpg">
			<div class="mask"></div>
			<div class="big"><img src="img/30f4e274e2596cfe.jpg" class="big_img"></div>
		</div>
	</div>
</body>
</html>

fdj.js代码如下

window.addEventListener('load',function(){
	var mask=document.querySelector('.mask');
	var big=document.querySelector('.big');
	var left=document.querySelector('.left');
	//1.当我们鼠标经过left 就显示和隐藏 mask遮挡层和 big大盒子
	left.addEventListener('mouseover',function(){
		mask.style.display='block';
		big.style.display='block';
	})
	left.addEventListener('mouseout',function(){
		mask.style.display='none';
		big.style.display='none';
	})
	//2.鼠标移动的时候 让黄色遮挡层跟着鼠标来走
	left.addEventListener('mouseover',function(e){
		//（1）.先计算鼠标在left盒子内的坐标 = 鼠标在浏览器中的坐标 - left盒子在浏览器中的坐标
		var x =e.pageX - this.offsetLeft;
		var y =e.pageY - this.offsetTop;
		// （2）.把鼠标在left盒子内的坐标赋值给黄色遮挡层 这样黄色遮挡层就会和鼠标一起移动
	    //      mask.offsetWidth/2  mask盒子宽度的一半 这样可以让鼠标处于黄色遮挡层mask的中间
		//（3）.我们mask 在left盒子中移动的距离 maskX
		var maskX= x - mask.offsetWidth / 2;
		var maskY= y - mask.offsetHeight / 2;
		// （4）.如果maskX坐标小于0，就让它的坐标固定为0 不让黄色遮挡层出了left盒子的左边界。
		// 当黄色遮挡层的右边界贴上left盒子的右边界的时候，黄色遮挡层左边界距离left左边界为150px = lef盒子宽度 - 黄色遮挡层宽度  也就是遮挡层的最大移动距离  maskMax = left.offsetWidth-mask.offsetWidth; 盒子的高宽一样所以都可以使用maskMax
		var maskMax = left.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.大图片移动距离 bigX = 遮挡层移动距离 maskX * 大图片最大移动距离 bigMAX / 遮挡层的最大移动距离 maskMax
		var bigImg=document.querySelector('.big_img');
		var bigMax= bigImg.offsetWidth - big.offsetWidth;
		var bigX = maskX * bigMax / maskMax;
		var bigY = maskY * bigMax / maskMax;
		bigImg.style.left=-bigX+'px';
		bigImg.style.top=-bigY+'px';
		
	})
	
})

南逗

关注

0
点赞
踩
2

收藏

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

分成三个模块模块一：鼠标经过黄色小盒子 mask ,黄色的遮挡层和大图片盒子 big 显示，离开则隐藏两个盒子1.就是显示和隐藏模块二：黄色的遮挡层会跟随鼠标走1.把鼠标坐标给遮挡层不合适，因为遮挡层坐标以父盒子left为准2.首先是获得鼠标在left盒子的坐标3.之后把数值给黄色遮挡层作为left和top值4.此时用到鼠标移动事件，但是还是在left盒子内移动5.发现，遮挡层...
复制链接

扫一扫