3.9 study 京东放大镜js实现效果_京东放大镜效果案例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52037321/article/details/123387756

博主分享了使用JavaScript实现京东商品放大镜效果的过程，遇到图片移动不流畅和非全屏显示的问题。通过代码展示，复习并加深了CSS绝对定位和相对定位的理解。计划明日暂停学习或调整进度，同时考虑优化代码来解决卡顿问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先汇报学习进度视频进度113/167 大概如果快的话下个星期就能学完js bom, 今天学习的案例较少，主要花时间去做了一下京东的放大镜案例。效果如下

首先说明两个问题，第一就是不知道为什么我这个图片很卡移动的不是很流畅，第二个问题就是图片问题没有刚好全屏的图片大概就是这样，这个很卡的问题日后需要进行改进完成我的预期的，

实现代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.img1{
				width: 400px;
				height: 400px;
				position: relative;
				border: 1px solid #CCCCCC;
			}
			.mask{
				display: none;
				top: 0;
				left: 0;
				width: 200px;
				height: 200px;
				position: absolute;
				opacity: 0.5;
				background-color: #FECC5B;
				cursor: move;
			}
			.big{
				display: none;
				position: absolute;
				background-color: plum;
				width: 500px;
				height: 500px;
				top: 0px;
				left: 410px;
				z-index: 999;
				overflow: hidden;
			}
			.big img{
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
	</head>
	<body>
		<div class="img1">
			<img src="img/400.jpg"/>
				
			</div>
			<div class="mask"></div>
			<div class="big">
				<img src="img/892.png" style="width: 800px;height: 800px;" class="bigimg"/>
			</div>
		</div>
		<script>
			var img1 = document.querySelector('.img1')
			var mask =document.querySelector('.mask')
			var big =document.querySelector('.big')
			img1.addEventListener('mouseover',function(){
				mask.style.display='block'
				big.style.display='block'
			})
			img1.addEventListener('mouseout',function(){
				mask.style.display='none'
				big.style.display='none'
			})
			img1.addEventListener('mousemove',function(e){
			var x=	e.pageX-this.offsetLeft
			var y= e.pageY-this.offsetTop
			var  maskx =x-mask.offsetWidth/2
			var masky=y-mask.offsetHeight/2
			if(maskx<=0){maskx=0}
			else if (maskx>=img1.offsetWidth-mask.offsetWidth){maskx=img1.offsetWidth-mask.offsetWidth}
			if(masky<=0){masky=0}
			else if (masky>=img1.offsetHeight-mask.offsetHeight){
				masky=img1.offsetHeight-mask.offsetHeight
			}
			mask.style.left =maskx+'px'
			mask.style.top= masky+'px'
			var maskMax = img1.offsetWidth-mask.offsetWidth
			var bigimg= document.querySelector('.bigimg')
			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'
			})
			
		</script>
	</body>
	
</html>