JS实现放大镜功能

最新推荐文章于 2023-06-15 17:34:06 发布

fgf-2021

最新推荐文章于 2023-06-15 17:34:06 发布

阅读量178

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42303695/article/details/107281109

版权

html和css

<body>
	<div id="div1">
		<div id="mark">
				
		</div>
		<img src="timg.jpg" >
	</div>
	<div id="div2">
		<img src="timg.jpg" id="img">
	</div>
</body>

*{margin: 0;padding: 0;}
#div1{width: 400px;height: 300px; position:absolute;left: 320px;top: 320px;}
#div1 img{width: 100%;height: 100%;}
#mark{height: 100px;width: 100px;opacity: 0.5;background-color: #808080;display: none;position: absolute;}
#div2{height: 200px;width: 200px;border: 1px #000000 solid;overflow: hidden;margin: 100px;display: none;}
#div2 img{width: 800px;height: 600px;position: relative;}

JS代码

window.onload=function(){
	var oDiv1=document.getElementById("div1");
	var oMark=document.getElementById("mark");
	var oDiv2=document.getElementById("div2");
	var oImg=document.getElementById("img");
	oDiv1.onmouseover=function(){
		oMark.style.display="block";
		oDiv2.style.display="block";
	}
	oDiv1.onmouseout=function(){
		oMark.style.display="none";
		oDiv2.style.display="none"
	}
	oDiv1.onmousemove=function(ev){
		var e=ev||window.event;
		var l=e.clientX-oDiv1.offsetLeft-50;
		var t=e.clientY-oDiv1.offsetTop-50;
		if(l<=0){
			l=0;
		}
		if(l>=300){
			l=300;
		}
		if(t<=0){
			t=0;
		}
		if(t>=200){
			t=200;
		}
		oMark.style.left=l+"px";
		oMark.style.top=t+"px";
					
		oImg.style.left=-2*l+"px";
		oImg.style.top=-2*t+"px";
	}
}

在这里插入图片描述 timg.jpg
上述放大镜功能可以将图片放大两倍。为什么l和t要减去50个像素，因为mark跟随鼠标移动时，要使鼠标保持在mark的中心点。l和t判断>=时，需要div1 的宽高减去mark的宽高。

fgf-2021

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现放大镜功能

html和css<body> <div id="div1"> <div id="mark"> </div> <img src="timg.jpg" > </div> <div id="div2"> <img src="timg.jpg" id="img"> </div></body>*{margin: 0;padding: 0;}#div1{wi
复制链接

扫一扫