制作网页放大镜效果-优快云博客

本文链接：https://blog.youkuaiyun.com/hello_sgw/article/details/77868923

制作类似淘宝上面的放大镜，需要一张小图，一张大图。效果如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>放大镜</title>
	<style>
		body,div,img{margin:0;padding: 0}
		#main{width: 300px;height: 189px;border:1px solid #666;position: relative;margin:50px auto;}
		#big{position: absolute;left:320px;top:0px;width:300px;height:189px;border:1px solid #666;overflow: hidden;display: none}
		#mark{width:50px;height: 50px;background: #ccc;opacity: 0.5;position: absolute;left:0;top:0;display: none}
	</style>
	
</head>
<body>
	<div id="main">
		<!-- 小图 -->
		<div id="small">
			<img src="imgs/ktm_small.jpg">
			<!-- 镜头-遮罩层 -->
			<div id="mark"></div>
		</div>
		<!-- 大图 -->
		<div id="big">
			<img src="imgs/ktm_big.jpg">
		</div>
	</div>
	<script>
		var small = document.getElementById('small');//调图div
		var big   = document.getElementById('big');//大图div
		var mark  = document.getElementById('mark');//遮罩层
		//1、给小图监视移入、移出事件
		small.onmouseover = function(){
			mark.style.display = 'block';
			big.style.display  = 'block';
		}
		small.onmouseout = function(){
			mark.style.display = 'none';
			big.style.display  = 'none';
		}
		//2、监视小图是否发生鼠标移动行为
		small.onmousemove = function(e){
			//鼠标移动时，通常获得鼠标的坐标,通过事件对象获得
			//这里兼容浏览器
			var ev = e || window.event;
			var x  = ev.clientX - this.parentNode.offsetLeft - mark.clientWidth/2;//mark与small的左间距
			var y  = ev.clientY - this.parentNode.offsetTop - mark.clientHeight/2;//mark与small的上间距
			
			//2.1防止镜头出界
			if(x<=0){
				x = 0;//拉回来固定在原点
			}
			if(y<=0){
				y = 0;
			}
			if(x>=small.offsetWidth - mark.offsetWidth){
				x = small.offsetWidth - mark.offsetWidth;
			}
			if(y>=small.offsetHeight - mark.offsetHeight){
				y = small.offsetHeight - mark.offsetHeight;
			}
			//3、计算大图移动的比例,让大图随遮罩层一起动
			var bigImg  = big.getElementsByTagName("img")[0];//大图
			var bigLeft = mark.offsetLeft/(small.offsetWidth - mark.offsetWidth)*(bigImg.offsetWidth - big.offsetWidth);
			var bigTop = mark.offsetTop/(small.offsetHeight - mark.offsetHeight)*(bigImg.offsetHeight - big.offsetHeight);

			//3.1、大图移动和镜头是反向的  
			bigImg.style.position = 'absolute';
			bigImg.style.left = -bigLeft+'px';
			bigImg.style.top = -bigTop+'px';

			mark.style.left = x+'px';
			mark.style.top = y+'px';
		}
	</script>
</body>
</html>

如果对于HTML DOM的元素对象不清楚，可以看下图，如图