放大镜功能

最新推荐文章于 2024-10-07 17:45:00 发布

小青_年

最新推荐文章于 2024-10-07 17:45:00 发布

阅读量88

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/angel900/article/details/115354032

版权

js html javascript css

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#small{width: 300px;height: 300px;position: absolute;left: 100px;top: 100px;}
			#small img{
				width: 100%; height: 100%;
			}
			#mark{display: none;width: 100px;height: 100px;background-color: white;opacity: 0.5;filter: alpha(opacity=50);position: absolute;left: 0;top: 0;}
			#big{display: none;width: 300px;height: 300px;border: 1px solid black;left: 500px;top: 100px;position: absolute;overflow: hidden;}
			#big img{width: 600px;height: 600px;position: absolute;left: 0px;top: 0px;}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var osmall = document.getElementById("small");
				var oBig = document.getElementById("big");
				var oMark = document.getElementById("mark");
				var oBigImg = oBig.getElementsByTagName("img")[0];
				
				osmall.onmouseover = function(){
					oMark.style.display = 'block';
					oBig.style.display = 'block';
				}
				osmall.onmouseout = function(){
					oMark.style.display = 'none';
					oBig.style.display = 'none';
				}
				osmall.onmousemove = function(ev){
					 var e = ev ||window.event;
					 //让遮罩层随鼠标移动，x，y的值为父元素的值减去父元素于body之间的空隙，让鼠标在遮罩层的中间位置在减去遮罩层宽高的一半
					 var l = e.clientX - osmall.offsetLeft - 50;//left值
					 var t = e.clientY - osmall.offsetTop - 50;//top值
					 if(l<=0){
						 l=0;
					 }
					 if(l>=200){
						 l = 200;
					 }
					 if(t<=0){
					 	t=0;
					 }
					 if(t>=200){
					 	t = 200;
					 }
					 oMark.style.left = l + 'px';
					 oMark.style.top = t + 'px';
					 
					 //右边图片的移动方式，左边遮罩层如何移动，右边图片，反方向对应倍数移动
					 oBigImg.style.left = l * -1.5 + "px";
					 oBigImg.style.top = t * -1.5 + "px";
				}
			}
		</script>
	</head>
	<body>
		<div id="small">
			<img src="./img/1.jpg" alt="">
			<div id="mark"></div>
		</div>
		<div id="big">
			<img src="./img/1.jpg" alt="">
		</div>
	</body>
</html>