<!DOCTYPE html><html lang='zh-cn'> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } #demo{ display: block; width: 400px; height: 255px; margin: 50px; position: relative; border: 1px solid #ccc; } #small-box{ position: relative; z-index: 1; } #float-box{ display: none; width: 160px; height: 120px; position: absolute; background: #fff; border: 1px solid #ccc; filter: alpha(opacity=50); opacity: 0.5; cursor: move; } #mark{ position: absolute; display: block; width: 400px; height: 255px; z-index: 10; cursor: move; background: #fff; filter: alpah(opacity=0); opacity: 0; } #big-box{ display: none; position: absolute; top: 0; left: 460px; width: 400px; height: 300px; overflow: hidden; border: 1px solid #ccc; z-index: 1; } #big-box img{ position: absolute; z-index: 5; } #log{ width: 80%; height: 300px; overflow: hidden; word-wrap: break-word; } </style> </head> <body> <script type="text/javascript"> window.onload=function(){ var objDemo=document.getElementById('demo'); var objSmallBox=document.getElementById('small-box'); var objMark=document.getElementById('mark'); var objFloatBox=document.getElementById('float-box'); var objBigBox=document.getElementById('big-box'); var objBigBoxImage=objBigBox.getElementsByTagName('img')[0]; objMark.onmouseover=function(){ objFloatBox.style.display='block'; objBigBox.style.display='block'; } objMark.onmouseout=function(){ objSmallBox.style.display='none'; objBigBox.style.display='none'; } objMark.onmousemove=function(ev){ var _event=ev||window.event; var left=_event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2; var top=_event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2; if(left<0){ left=0; }else if(left>(objMark.offsetWidth-objFloatBox.offsetWidth)){ left=objMark.offsetWidth-objFloatBox.offsetWidth; } if(top<0){ top=0; }else if(top>(objMark.offsetHeight-objFloatBox.offsetHeight)){ top=objMark.offsetHeight-objFloatBox.offsetHeight; } objFloatBox.style.left=left+'px'; objFloatBox.style.top=top+'px'; var percentX=left/(objSmallBox.offsetWidth-objFloatBox.offsetWidth); var percentY=top/(objSmallBox.offsetHeight-objFloatBox.offsetHeight); objBigBoxImage.style.left=-percentX*(objBigBoxImage.offsetWidth-objBigBox.offsetWidth)+"px"; objBigBoxImage.style.top=-percentY*(objBigBoxImage.offsetHeight-objBigBox.offsetHeight)+'px'; } } </script> <div id="demo"> <div id="small-box"> <div id="mark"></div> <div id="float-box"></div> <img src="macbook-small.jpg" /> </div> <div id="big-box"> <img src="macbook-big.jpg" /> </div> </div> <p id="log"></p> </body></html>
