放大镜原生实现

最新推荐文章于 2024-09-20 09:09:17 发布

@随性

最新推荐文章于 2024-09-20 09:09:17 发布

阅读量95

点赞数

文章标签： js 面试

本文链接：https://blog.csdn.net/wqliuj/article/details/108741396

版权

分析

难点列出
1.鼠标在图片区域时，透明小区域出现，放大的区域出现
2.鼠标移出图片时，透明小区域小时，放大区域消失
3.透明小区域随着鼠标移动
难点解决关键（对应解决回答）
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>