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

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

karenYin0828

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

阅读量648

点赞数

分类专栏： javaScript学习文章标签： javascript 放大镜效果简易实现

本文链接：https://blog.csdn.net/yinkaihui/article/details/50908008

版权

javaScript学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

<!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>

karenYin0828

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生javascript 简易实现放大镜效果

原理：其实所谓的放大就是准备两张一样的图片，除大小不一样。鼠标移动到不同位置，将会显示大图片对应的图片内容。放大镜效果 var filter = document.getElementById('filter'); var smallImg = document.getElemen
复制链接

扫一扫

专栏目录