放大镜 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{
padding:0;
margin:0;
}
#box{  
	width:400px;
	height:255px;
	border:1px solid #ac0;
	position:relative;
}
#smallBox{ 
	width:400px;
	height:255px;
	position:relative;
}
#mark{
    position:absolute; 
	width:400px;
	height:255px;
	background:red;
	opacity:0;
	z-index:10;
}
#mirro{
    display:none;
    position:absolute;
    width:160px;
	height:160px;
	background:#fff;
	opacity:.5;
	
}
#bigBox{ 
	width:400px;
	height:255px;
	position:absolute;
	left:430px;
	overflow:hidden;
	top:0;
	display:none;
	border:1px solid #ac0;
}
#bigImg{
   position:absolute;
}
</style>
</head>
<body>
<div id="box">
    <div id="smallBox">
	    <div id="mark"></div>
	    <div id="mirro"></div>
		<img src="../img/small.jpg" id="smallImg"/>
	</div>
	<div id="bigBox">
	    <img src="../img/big.jpg" id="bigImg"/>
	</div>
</div>
</body>
</html>
<script>
function $(id){
    return document.getElementById(id);
}
window.onload=function(){
    $("mark").onmouseover=function(){
	  $("mirro").style.display="block"; 
      $("bigBox").style.display="block";	  
	}
	$("mark").onmouseout=function(){
	  $("mirro").style.display="none"; 
      $("bigBox").style.display="none";	  
	}
	$("mark").onmousemove=function(e){
	var e=event||window.event;
    var box=$("box");
	var mark=$("mark");
	var mirro=$("mirro");
	var bigBox=$("bigBox");
	var smallBox=$("smallBox");
	var bigBoximg=$("bigImg");
	var left=e.clientX-box.offsetLeft-smallBox.offsetLeft-mirro.offsetWidth/2;
	var top=e.clientY-box.offsetTop-smallBox.offsetTop-mirro.offsetHeight/2;
	//判断边界
	if(left<0){
	    left=0;
	}else if(left>mark.offsetWidth-mirro.offsetWidth){
	    left=mark.offsetWidth-mirro.offsetWidth;
	}
	if(top<0){
	    top=0;
	}else if(top>mark.offsetHeight-mirro.offsetHeight){
	    top=mark.offsetHeight-mirro.offsetHeight;
	}
	  $("mirro").style.top=top+"px"; 
      $("mirro").style.left=left+"px";	  
	var perX=left/(mark.offsetWidth-mirro.offsetWidth);
	var pery=top/(mark.offsetHeight-mirro.offsetHeight);
	bigBoximg.style.left=-perX*(bigBoximg.offsetWidth-bigBox.offsetWidth)+"px";
	bigBoximg.style.top=-pery*(bigBoximg.offsetHeight-bigBox.offsetHeight)+"px";
   }
}
</script>

　　

posted @ 2017-12-09 16:17  韩麗璃  阅读(129)  评论(0)    收藏  举报
返回顶部
打赏