一，问题描诉

通过将鼠标指向指定的图片，将鼠标移动到图片时，显示一个透明的小区域，然后将小区域的部分放大，查看细节。放大过程中必须满足几个条件：

1.鼠标移动时，透明的小区域也跟着移动，并且透明的小区域必须在指定的图片内，不得出该图片的范围。
2.放大的区域要按照一定的比例展示出来

二，难点分析

2.1难点列出

1.鼠标在图片区域时，透明小区域出现，放大的区域出现
2.鼠标移出图片时，透明小区域小时，放大区域消失
3.透明小区域随着鼠标移动

2.2 难点解决关键（对应解决回答）

1.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为block
2.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为none
3.通过event对象获取鼠标的当前坐标位置，即方法event.layerX,event.layer.Y,然后通过放入鼠标事件onmoursemove监听，不停的将透明小区域的top和left置为event.layerX,event.layer.Y的值

三，详细代码

3.1 代码结构

3.2 具体代码

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="../css/Magnifier.css"/>
	<script src="../js/Magnifier.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="all">
			<div id="small">
				<img src="../images/small.jpg"/>
				<div id="shadow"></div>
				<div id="cover"></div>	
			</div>
			<div id="big">
				<img src="../images/big.jpg"/>
			</div>
			
		</div>
	</body>
</html>

Css代码

*{
	padding: 0px;
	margin: 0px;
}
#all{
	margin: 0 auto;
	width: 1000px;
	height: 800px;
	border:1px solid blue ;
}
#small{
	width: 310px;
	height: 310px;
	margin-top: 80px;
	margin-left:100px;
	border:1px solid red ;
	position: relative;
	float: left;
}
#small img{
	/*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;
}

Js代码

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";
}

四，效果演示

更多推荐

Html+Css+Js实现放大镜功能（完整代码+详解）