js简单放大镜

秒速五厘米 2022-06-09 13:23 254阅读 0赞

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

![Center][]

<!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的元素对象不清楚，可以看下图，如图

![Center 1][]

![20170906180509994][]

![20170906180515150][]

[Center]: /images/20220609/688658d186de456981600371217d1ba3.png
[Center 1]: /images/20220609/eb99899e2eb94b0787e44b5f966043dd.png
[20170906180509994]: /images/20220609/5105e7ffb24946c2893d67c857694102.png
[20170906180515150]: /images/20220609/06a90054beb848f98a3f02d2f777a2d3.png