原生javascript 简易实现放大镜效果

最新推荐文章于 2021-12-29 13:32:51 发布

原创最新推荐文章于 2021-12-29 13:32:51 发布 · 688 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #放大镜效果 #简易实现

javaScript学习专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种利用HTML和JavaScript实现的图片放大镜效果。通过鼠标悬停在小图上时展示对应的大图细节，提升了用户体验。代码中详细展示了如何通过事件监听来控制放大区域的位置及大图显示。

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

原理：其实所谓的放大就是准备两张一样的图片，除大小不一样。鼠标移动到不同位置，将会显示大图片对应的图片内容。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>放大镜效果</title>
</head>
<body>
	<div id="wrap" style="position: relative;width: 900px;margin: 0 auto;text-align: center;">
		<div id="smallImg" style="width: 400px;height: 400px; position: relative;z-index: 1;">
			<img src="small.jpg" style="width: 400px;height: 400px;"/>
			<span id="filter"  style="width: 200px;height: 200px;background-color: blue;opacity: 0.1;position: absolute;top: 0;left: 0; z-index: 2;cursor: move;display: none;">
			<span>
		</div>
		<div id="bigImg" style="width: 400px;height: 400px;overflow: hidden;position: absolute;right: 0px;top: 0;display: none;">
			<img src="large.jpg" style="width: 800px;height:800px; position: absolute;left: 0;top: 0;">
		</div>
		
	</div>
	<script type="text/javascript">
		var filter = document.getElementById('filter');
		var smallImg = document.getElementById('smallImg');
		var bigImg = document.getElementById('bigImg');	
		var wrap = document.getElementById('wrap');
		var largeImgs = bigImg.getElementsByTagName('img')[0];

		smallImg.onmouseover = function(){
			bigImg.style.display = "inline-block";
			filter.style.display = "inline-block";
		}

		smallImg.onmousemove = function(event){
			var event = event || window.event;
			var mouseleft = event.clientX - wrap.offsetLeft;
			var mousetop = event.clientY - wrap.offsetTop;
			var left = mouseleft<smallImg.offsetWidth/4?0:mouseleft>smallImg.offsetWidth*3/4?smallImg.offsetWidth/2:(mouseleft - filter.offsetWidth/2);
			var top = mousetop<smallImg.offsetHeight/4?0:mousetop>smallImg.offsetHeight*3/4?smallImg.offsetHeight/2:(mousetop - filter.offsetWidth/2);
			filter.style.left = left + "px";
			filter.style.top = top +"px"; 
			largeImgs.style.left = "-" +　left*bigImg.offsetWidth/smallImg.offsetWidth + "px";
			largeImgs.style.top = "-" +　top*bigImg.offsetHeight/smallImg.offsetHeight + "px";
		}
		smallImg.onmouseout = function(){
			bigImg.style.display = "none";
			filter.style.display = "none";
		}
	</script>
</body>
</html>