秒懂放大镜

蔚落 2022-12-09 05:12 226阅读 0赞

### 分析 ###

1.  难点列出  
    1.鼠标在图片区域时，透明小区域出现，放大的区域出现  
    2.鼠标移出图片时，透明小区域小时，放大区域消失  
    3.透明小区域随着鼠标移动
2.  难点解决关键（对应解决回答）  
    1.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为block  
    2.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为none  
    3.通过event对象获取鼠标的当前坐标位置，即方法event.layerX,event.layer.Y,然后通过放入鼠标事件onmoursemove监听，不停的将透明小区域的top和left置为event.layerX,event.layer.Y的值

### 代码 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
        </head>
        <style>
            *{ 
    	padding: 0px;
    	margin: 0px;
    }
    #all{ 
    	margin: 0 auto;
    	width: 1000px;
    	height: 800px;
    	border:1px solid blue ;
    }
    #small{ 
    	width: 210px;
    	height: 210px;
    	margin-top: 80px;
    	margin-left:100px;
    	border:1px solid red ;
    	position: relative;
    	float: left;
    }
    #small img{ 
        width: 210px;
    	height: 210px;
    	border:1px solid gray ;
    }
    #shadow{ 
    	width: 100px;
    	height: 100px;
    	background-color: black;
    	opacity: .2;
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	display: none;
    	cursor: move;
    }
    #cover{ 
    	width: 100%;
    	height:100%;
    	z-index: 10;
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	cursor: move;
    }
    #big{ 
    	width: 310px;
    	height: 310px;
    	position: relative;
    	overflow: hidden;
    	border:1px solid yellow ;
    	display: none;
    	
    }
    #big img{ 
    	position: absolute;
    	top: 0px;
    	left: 0px;
    }
    
    
    
        </style>
        <script>
    
    window.onload=function(){ 
    	small=document.getElementById("small");
    	shadow=document.getElementById("shadow");
    	shadowWH=shadow.style.width?shadow.style.width:document.defaultView.getComputedStyle(shadow,null).width;
    	shadowWH=parseInt(shadowWH);
    	smallW=small.style.width?small.style.width:document.defaultView.getComputedStyle(small,null).width;
    	smallW=parseInt(smallW);
    // smallML=small.style.marginLeft?small.style.marginLeft:document.defaultView.getComputedStyle(small,null).marginLeft;
    // smallML=parseInt(smallML);
    	
    	smallMT=small.style.marginTop?small.style.marginTop:document.defaultView.getComputedStyle(small,null).marginTop;
    	smallMT=parseInt(smallMT);
    	big=document.getElementById("big");
    	bigW=big.style.width?big.style.width:document.defaultView.getComputedStyle(big,null).width;
    	bigW=parseInt(bigW);
    // console.log(smallW);
    // console.log(shadowWH)
    //console.log("smallML="+smallML);
    //console.log("smallMT="+smallMT);
    //console.log("bigw="+bigW);
    	bigImg=big.getElementsByTagName("img")[0];
    	move();
    }
    function move(){ 
    	small.onmouseover=function(){ 
    		shadow.style.display="block";
    		big.style.display="block";
    		change(event);
    	}
    	small.onmouseout=function(){ 
    		shadow.style.display="none";
    		big.style.display="none";
    	}
    	small.onmousemove=function(){ 
    		change(event);
    	}
    }
    function change(event){ 
    	var evt=event?event:window.event;
    // var moveL=evt.pageX;
    // var moveT=evt.pageY;
    	var moveL=evt.layerX-shadowWH/2;
    	var moveT=evt.layerY-shadowWH/2;
    	
    // console.log("moveL="+moveL+": moveT="+moveT);
    	
    	if(moveL<0){ 
    		moveL=0;
    	}
    	if(moveL>smallW-shadowWH){ 
    		moveL=smallW-shadowWH;
    	}
    	
    	if(moveT<0){ 
    		moveT=0;
    	}
    	if(moveT>smallW-shadowWH){ 
    		moveT=smallW-shadowWH;
    	}
    	
    	shadow.style.left=moveL+"px";
    	shadow.style.top=moveT+"px";
    	/** * 图片放大 */
    // big.style.left=smallW+smallML+50+"px";
    	big.style.left=50+"px";
    	big.style.top=smallMT+"px";
    	bigImgW=bigImg.offsetWidth;
    // console.log("bigImgW="+bigImgW);
    	var scale=bigImgW/bigW;
    	bigImg.style.top=-moveT*scale+"px";
    	bigImg.style.left=-moveL*scale+"px";
    }
    
    
        </script>
    	
    	<body>
    		<div id="all">
    			<div id="small">
    				<img src="../images/12.png"/>
    				<div id="shadow"></div>
    				<div id="cover"></div>	
    			</div>
    			<div id="big">
    				<img src="../images/12.png"/>
    			</div>
    			
    		</div>
    	</body>
    </html>

### 效果 ###

![在这里插入图片描述][20200922105755906.gif_pic_center]  
出处[https://blog.csdn.net/qq\_38170526/article/details/98109424?utm\_medium=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel\_param&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel\_param][https_blog.csdn.net_qq_38170526_article_details_98109424_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param]

[20200922105755906.gif_pic_center]: /images/20221123/8a58efffcf0f40fba3aa2f29c7abd22d.png
[https_blog.csdn.net_qq_38170526_article_details_98109424_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param]: https://blog.csdn.net/qq_38170526/article/details/98109424?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param