<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="description" content="" />
<title></title>
<style>
*{ margin:0; padding:0;}
box{ position:relative; left:100px; top:100px;}
small{ width:300px; height:193px; position:relative; overflow:hidden;}
small img{ display:block; width:300px; position:absolute;}
small .float{ width:100px; height:100px; background:#f00; position:absolute; z-index:2; display:inline-block; opacity:0.5; filter:alpha(opacity:50) cursor:move; display:none;}
big{ width:300px; height:300px; position:absolute; display:none; left:320px; top:0; overflow:hidden;}
big img{ position:absolute; left:0; top:0;}
</style>
<script>
window.onload=function(){
var oSmall=document.getElementById('small');
var oBig=document.getElementById('big');
var oImg=oBig.children[0];
var oBox=document.getElementById('box');
var oFloat=oSmall.children[0];
oSmall.onmouseenter=function(){
oFloat.style.display='block';
oBig.style.display='block';
};
oSmall.onmouseleave=function(){
oFloat.style.display='none';
oBig.style.display='none';
};
oSmall.onmousemove=function(ev){
var oEvent=ev || event;
var left=oEvent.clientX-oBox.offsetLeft-oFloat.offsetWidth/2;
var top=oEvent.clientY-oBox.offsetTop-oFloat.offsetHeight/2;
left<0 && (left=0);
if(left>oSmall.offsetWidth-oFloat.offsetWidth){
left=oSmall.offsetWidth-oFloat.offsetWidth;
}
top<0 && (top=0);
if(top>oSmall.offsetHeight-oFloat.offsetHeight){
top=oSmall.offsetHeight-oFloat.offsetHeight;
}
oFloat.style.left=left+'px';
oFloat.style.top=top+'px';
//放大鏡
/*
*
* 小圖比例=大圖比例
*
* 小圖比例=left/(oSmall.offsetWidth-oFloat.offsetWidth)
* 大圖比例=?/(oImg.offsetWidth-oBig.offsetWidth)
*
* left/(oSmall.offsetWidth-oFloat.offsetWidth)=?/(oImg.offsetWidth-oBig.offsetWidth)
*
* ?=left/(oSmall.offsetWidth-oFloat.offsetWidth)*(oImg.offsetWidth-oBig.offsetWidth)
*
* */
oImg.style.left=-left/(oSmall.offsetWidth-oFloat.offsetWidth)*(oImg.offsetWidth-oBig.offsetWidth)+'px';
oImg.style.top=-top/(oSmall.offsetHeight-oFloat.offsetHeight)*(oImg.offsetHeight-oBig.offsetHeight)+'px';
};
};
</script>
</head>
<body>
<div id="box">
<div id="small">
<div class="float"></div>
<img src="small.jpg">
</div>
<div id="big">
<img src="big.jpg">
</div>
</div>
</body>
</html>
