<!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>放大镜</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> *{padding:0; margin:0;} #main{margin:20px;} .smallPic{400px;height:400px;float:left;margin-right:15px; position:relative; border:1px solid #e6eaf3;} .smallPic img {position:absolute; top:0px; left:0px;} .smallPic .mouse{cursor:crosshair;150px;height:150px;position:absolute;top:0px;left:0px;z-index:5;background:#e6eaf3;opacity:.80;filter:alpha(opacity=80);display:none;} .bigPic{500px;height:500px; display:none;border:1px solid #e6eaf3;float:left;overflow:hidden;position:relative;} .bigPic img{position:absolute;left:0;top:0px;} </style> </head> <body> <script type="text/javascript"> window.onload=function(){ show({ id:'main' }) } function show(opt){ var oBox = document.getElementById(opt.id); var oDiv = oBox.getElementsByTagName('div')[0]; var oP = oBox.getElementsByTagName('p')[0]; var oMaxDiv = oBox.getElementsByTagName('div')[1]; var oImg = oMaxDiv.getElementsByTagName('img')[0]; oDiv.onmouseover = function(){ oP.style.display = 'block'; oMaxDiv.style.display = 'block'; }; oDiv.onmouseout= function(){ oP.style.display = 'none'; oMaxDiv.style.display = 'none'; }; oDiv.onmousemove = function(ev){ var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft; var oEvent = ev||event; var L = (oEvent.clientX - oDiv.offsetLeft - oP.offsetWidth/2)+scrollLeft; var T = (oEvent.clientY - oDiv.offsetTop - oP.offsetHeight/2)+scrollTop; if(L<0){ L = 0; }else if(L>oDiv.offsetWidth-oP.offsetWidth){ L = oDiv.offsetWidth-oP.offsetWidth; } if(T<0){ T = 0; }else if(T>oDiv.offsetHeight-oP.offsetHeight){ T = oDiv.offsetHeight-oP.offsetHeight; } oP.style.left = L+'px'; oP.style.top = T + 'px'; var scaleL = L/(oDiv.offsetWidth-oP.offsetWidth); var scaleT = T/(oDiv.offsetHeight-oP.offsetHeight); oImg.style.left = -(oImg.offsetWidth-oMaxDiv.offsetWidth)*scaleL +'px'; oImg.style.top = -(oImg.offsetHeight-oMaxDiv.offsetHeight)*scaleT+'px'; } } </script> <div id='main'> <div class='smallPic'> <p class='mouse'></p> <img src='http://www.milanw.com/images/1875703-1j201402121420212353.jpg' width='400px' height='400px' /> </div> <div class='bigPic'> <img src="http://www.milanw.com/images/1875703-1j201402121420212352.jpg" width='800px' height='800px'/> </div> </div> </body> </html>