/*
*知识点预备
clientX,clientY 鼠标相对于可视区的位置
offsetX,offsetY layerX layerY 鼠标相对于事件源的位置
screenX，screenY 鼠标相对于屏幕的位置
pageX , pageY IE(不支持)鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化。
在有滚动条的情况下就需要做这种额外的处理
兼容性的处理如下
var docE = document.documentElement,docBody=document.body;
pageX = clientX + Math.max(docE .scrollLeft,docBody.scrollLeft);
pageY = clientY + Math.max(docE .scrollTop,docBody.scrollTop);**/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>放大镜</title>
<link rel="stylesheet" href="">
<style type="text/css">
media="all"
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, big, cite, code, del, em, font, img, ins, small, strong, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
margin: 0;
padding: 0;
}
#small{
border: 1px solid #dddddd;
width: 352px;
height: 352px;
position: absolute;
top: 0px;
left: 0px;
}
#small img{
width: 350px;
height: 350px;
}
.zoomUp{
visibility:hidden;
cursor: move;
border: 1px solid #ddd;
background: #FEDE4F 50% top no-repeat;
opacity: .5;
-moz-opacity: .5;
-khtml-opacity: .5;
filter: alpha(Opacity=50);
position: absolute;
left: 0;
top:0;
}
#big{
width: 402px;
height: 402px;
position: absolute;
left: 362px;
top: 0px;
border: 1px solid #dddddd;
overflow: hidden;
visibility: hidden;
}
#big img{
width: 800px;
height: 800px;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
var small = document.getElementById("small");
var big = document.getElementById("big");
var bigImg = big.getElementsByTagName("img")[0];
small.onmouseover = function(e){
var e = e || window.event;
big.style.visibility = "visible";
small.onmousemove = function(e){
var e = e || window.event;
//事件源位置
var ex = e.offsetX || e.layerX;
var ey = e.offsetY || e.layerY;
bigImg.style.left = -ex/small.offsetWidth*(big.offsetWidth)+"px";
bigImg.style.top = -ey/small.offsetHeight*(big.offsetHeight)+"px";
}
small.onmouseout = function(e){
console.log("out");
big.style.visibility = "hidden";
small.onmousemove = small.onmouseout = null;
}
return false;
}
}
</script>
</head>
<body>
<div id="small">
<img src="img/small.jpg" />
</div>
<div id="big">
<img src="img/big.jpg">
</div>
</body>
</html>
