<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } #box{ width:375px; height:250px; border:1px red solid; float:left; position:relative; margin-left:50px; margin-top:50px; } #leftImg{ width:375px; height:250px; display:block; } #drag{ width:187.5px; height:125px; background:yellow; position:absolute; left:0; top:0; opacity:0.4; filter:Alpha(opacity=40);/*解决IE8以下！！！！*/ cursor:move; display:none; } #rightImg{ width:750px; height:500px; } #rightShow{ float:left; width:375px; height:250px; border:1px blue solid; overflow:hidden; display:none; margin-top:50px; } </style> </head> <body> <div id="box"> <img id="leftImg" src="1200.jpg" alt=""> <div id="drag"></div> </div> <div id="rightShow"> <img id="rightImg" src="1200.jpg" alt=""> </div> </body> <script> var oBox = document.getElementById('box'); var drag = document.getElementById('drag'); var rightShow = document.getElementById('rightShow'); oBox.onmousemove = function () { var e = event ||window.event; drag.style.display='block'; rightShow.style.display='block'; var lefts = e.clientX - oBox.offsetLeft - drag.offsetWidth/2; var tops = e.clientY - oBox.offsetTop - drag.offsetHeight/2; var maxWidth = oBox.offsetWidth - drag.offsetWidth; var maxHeight = oBox.offsetHeight - drag.offsetHeight; if(lefts > maxWidth){ lefts = maxWidth } if (tops > maxHeight) { tops = maxHeight; } if (lefts<0) { lefts = 0 } if (tops < 0) { tops = 0 } drag.style.left = lefts + 'px'; drag.style.top = tops + 'px'; var num = rightImg.offsetWidth / leftImg.offsetWidth; rightShow.scrollLeft = drag.offsetLeft * num; rightShow.scrollTop = drag.offsetTop * num; } oBox.onmouseout = function(){ drag.style.display = 'none'; rightShow.style.display = 'none'; } </script> </html>
