放大镜效果的一点疑问
0
悬赏园豆：10
[已关闭问题]
关闭于 2013-09-15 10:17
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>放大镜</title> 6 <style type="text/css"> 7 8 #div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; } 9 10 #div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative; } 11 #div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; } 12 #div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;} 13 #div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; } 14 #div1 .big_pic img { position:absolute; top: -30px; left: -80px; } 15 </style> 16 <script type="text/javascript"> 17 function getByClass(oParent, sClass) 18 { 19 var aEle=oParent.getElementsByTagName('*'); 20 var aTmp=[]; 21 var i=0; 22 23 for(i=0;i<aEle.length;i++) 24 { 25 if(aEle[i].className==sClass) 26 { 27 aTmp.push(aEle[i]); 28 } 29 } 30 31 return aTmp; 32 } 33 34 window.onload=function () 35 { 36 var oDiv=document.getElementById('div1'); 37 var oMark=getByClass(oDiv, 'mark')[0]; 38 var oFloat=getByClass(oDiv, 'float_layer')[0]; 39 var oBig=getByClass(oDiv, 'big_pic')[0]; 40 var oSmall=getByClass(oDiv, 'small_pic')[0]; 41 var oImg=oBig.getElementsByTagName('img')[0]; 42 43 oMark.onmouseover=function () 44 { 45 oFloat.style.display='block'; 46 oBig.style.display='block'; 47 }; 48 49 oMark.onmouseout=function () 50 { 51 oFloat.style.display='none'; 52 oBig.style.display='none'; 53 }; 54 55 oMark.onmousemove=function (ev) 56 { 57 var oEvent=ev||event; 58 59 var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2; 60 var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2; 61 62 if(l<0) 63 { 64 l=0; 65 } 66 else if(l>oMark.offsetWidth-oFloat.offsetWidth) 67 { 68 l=oMark.offsetWidth-oFloat.offsetWidth; 69 } 70 71 if(t<0) 72 { 73 t=0; 74 } 75 else if(t>oMark.offsetHeight-oFloat.offsetHeight) 76 { 77 t=oMark.offsetHeight-oFloat.offsetHeight; 78 } 79 80 oFloat.style.left=l+'px'; 81 oFloat.style.top=t+'px'; 82 83 // 84 var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth); 85 var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight); 86 87 oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px'; 88 oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px'; 89 //450-200=250px; 90 //250px*-0.2=-50px; 91 }; 92 }; 93 94 </script> 95 </head> 96 97 <body> 98 99 <div id="div1"> 100 101 <div class="small_pic"> 102 <span class="mark"></span> 103 <span class="float_layer"></span> 104 <img src="images/small.png" alt="" longdesc="" /> 105 </div> 106 107 <div class="big_pic"> 108 <img src="images/big.png" alt="" longdesc="" /> 109 </div> 110 111 </div> 112 113 </body> 114 </html>
谁知道oImg的left，top的位置为什么是这样算的，为什么left，top都要是负值。最好讲一下你在写这个效果的时候思路是怎么样的，感激不尽！！！！
