案例放大镜 - 爱码网

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#box{
			width: 350px;
			height: 350px;
			border: 1px solid #000;
			margin: 200px;
			position: relative;
		}
		#big{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			overflow: hidden;
			position: absolute;
			top:0;
			left : 360px;
			display: none;
		}
		#mask{
			width: 175px;
			height: 175px;
			background: paleturquoise;
			position: absolute;
			left:0;
			top: 0;
			opacity: 0.3;
			display: none;
			cursor: move;
		}
		#small{
			position: relative;
		}
		#bigImg{
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
	<body>
		<div id="box" >
			<div id="small"><!--小图区-->
				<img src="images/001.jpg" alt="" />
				<div id="mask"></div><!--遮罩层-->
			</div>
			<div id="big"><!--大图区-->
				<img src="images/0001.jpg" alt="" id="bigImg"/>
			</div>
		</div>
	</body>
</html>
<script src="public.js"> </script>
<script type="text/javascript">
$id("box").onmouseover=function(){
	$id("mask").style.display="block";
	$id("big").style.display="block";
	
}
$id("box").onmouseout=function(){
	$id("mask").style.display="none";
	$id("big").style.display="none";
	
}
$id("box").onmousemove=function(e){
	var e=e||event;
	var l=e.pageX-$id("box").offsetLeft-$id("mask").offsetWidth/2;
	var t=e.pageY-$id("box").offsetTop-$id("mask").offsetHeight/2;
	
	var left=$id("small").offsetWidth-$id("mask").offsetWidth;
	var top=$id("small").offsetHeight-$id("mask").offsetHeight;
	
	l=l<0?0:(l>left?left:l);
	t=t<0?0:(t>top?top:t);
	
	$id("mask").style.left=l+"px";
	$id("mask").style.top=t+"px";
	
	var bigImgl=l*$id("bigImg").offsetWidth/$id("small").offsetWidth;
	var bigImgt=l*$id("bigImg").offsetHight/$id("small").offsetHeight;
	
	$id("bigImg").style.left=-bigImgl+"px";
	$id("bigImg").style.top=-bigImgt+"px";
}
</script>
案例放大镜