<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>放大镜</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{padding:0; margin:0;}
#main{margin:20px;}
.smallPic{width:400px;height:400px;float:left;margin-right:15px; position:relative; border:1px solid #e6eaf3;}
.smallPic img {position:absolute; top:0px; left:0px;}
.smallPic .mouse{cursor:crosshair;width:150px;height:150px;position:absolute;top:0px;left:0px;z-index:5;background:#e6eaf3;opacity:.80;filter:alpha(opacity=80);display:none;}
.bigPic{width:500px;height:500px; display:none;border:1px solid #e6eaf3;float:left;overflow:hidden;position:relative;}
.bigPic img{position:absolute;left:0;top:0px;}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
show({
id:'main'
})
}
function show(opt){
var oBox = document.getElementById(opt.id);
var oDiv = oBox.getElementsByTagName('div')[0];
var oP = oBox.getElementsByTagName('p')[0];
var oMaxDiv = oBox.getElementsByTagName('div')[1];
var oImg = oMaxDiv.getElementsByTagName('img')[0];
oDiv.onmouseover = function(){
oP.style.display = 'block';
oMaxDiv.style.display = 'block';
};
oDiv.onmouseout= function(){
oP.style.display = 'none';
oMaxDiv.style.display = 'none';
};
oDiv.onmousemove = function(ev){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
var oEvent = ev||event;
var L = (oEvent.clientX - oDiv.offsetLeft - oP.offsetWidth/2)+scrollLeft;
var T = (oEvent.clientY - oDiv.offsetTop - oP.offsetHeight/2)+scrollTop;
if(L<0){
L = 0;
}else if(L>oDiv.offsetWidth-oP.offsetWidth){
L = oDiv.offsetWidth-oP.offsetWidth;
}
if(T<0){
T = 0;
}else if(T>oDiv.offsetHeight-oP.offsetHeight){
T = oDiv.offsetHeight-oP.offsetHeight;
}
oP.style.left = L+'px';
oP.style.top = T + 'px';
var scaleL = L/(oDiv.offsetWidth-oP.offsetWidth);
var scaleT = T/(oDiv.offsetHeight-oP.offsetHeight);
oImg.style.left = -(oImg.offsetWidth-oMaxDiv.offsetWidth)*scaleL +'px';
oImg.style.top = -(oImg.offsetHeight-oMaxDiv.offsetHeight)*scaleT+'px';
}
}
</script>
<div id='main'>
<div class='smallPic'>
<p class='mouse'></p>
<img src='http://www.milanw.com/images/1875703-1j201402121420212353.jpg' width='400px' height='400px' />
</div>
<div class='bigPic'>
<img src="http://www.milanw.com/images/1875703-1j201402121420212352.jpg" width='800px' height='800px'/>
</div>
</div>
</body>
</html>
