首页 新闻 搜索 专区 学院

放大镜效果的一点疑问

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都要是负值。最好讲一下你在写这个效果的时候思路是怎么样的,感激不尽!!!!

Paxster的主页 Paxster | 初学一级 | 园豆:125
提问于:2013-09-04 23:30
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册