/*
*知識點預備
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="" target="_blank" rel="external nofollow" >
<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>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)