一个放大镜点击的问题

当打开浏览器第一次点击(不要去移动)的时候，点击显示下一张图，那个相对应的大图位置有问题，

当点过几次后就不会了

我要怎么在点击的时候就算好大图相对应的位置呢

谁能帮我修正下




 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 <link rel="stylesheet" type="text/css" href="style.css" />
 7 <script type="text/javascript" src="miaov.js"></script>
 8 </head>
 9 <body>
10 <div id="div1">
11     <div class="small_pic">
12         <span class="mark"></span>
13         <span class="float_layer"></span>
14         <img src="#" width="100%" height="100%"/>
15     </div>
16     <div class="big_pic"><img src="#" /></div>
17 </div>
18 </body>
19 </html>

 1 body{
 2     margin:0;
 3     padding:0;
 4 }
 5 
 6 #div1 { 
 7     width: 200px; 
 8     height: 200px; 
 9     padding: 5px; 
10     border: 1px solid #ccc; 
11     position: relative; 
12 }
13 
14 #div1 .small_pic { 
15     width: 200px; 
16     height: 200px; 
17     background: #eee; 
18     position: relative; 
19 }
20 #div1 .float_layer { 
21     width: 100px; 
22     height: 100px; 
23     border: 1px solid #000; 
24     background: #fff; 
25     filter: alpha(opacity: 30); 
26     opacity: 0.3; 
27     position: absolute; 
28     top: 0; 
29     left: 0; 
30     display:none; 
31 }
32 #div1 .mark {
33     width:100%; 
34     height:100%; 
35     position:absolute; 
36     z-index:2; 
37     left:0px; 
38     top:0px; 
39     background:red; 
40     filter:alpha(opacity:0); 
41     opacity:0;
42 }
43 #div1 .big_pic { 
44     position: absolute; 
45     top: -1px; 
46     left: 215px; 
47     width:250px; 
48     height:250px; 
49     overflow:hidden; 
50     border:2px solid #CCC; 
51     display:none; 
52 }
53 #div1 .big_pic img { 
54     position:absolute; 
55     top: -48px; 
56     left: -100px; 
57 }

  1 function getByClass(oParent, sClass)
  2 {
  3     var aEle=oParent.getElementsByTagName('*');
  4     var aTmp=[];
  5     var i=0;
  6     
  7     for(i=0;i<aEle.length;i++)
  8     {
  9         if(aEle[i].className==sClass)
 10         {
 11             aTmp.push(aEle[i]);
 12         }
 13     }
 14     
 15     return aTmp;
 16 }
 17 
 18 window.onload=function ()
 19 {
 20     var oDiv=document.getElementById('div1');
 21     var oMark=getByClass(oDiv, 'mark')[0];//整个图片透明区
 22     var oFloat=getByClass(oDiv, 'float_layer')[0];//移动的小框
 23     var oBig=getByClass(oDiv, 'big_pic')[0];
 24     var oSmall=getByClass(oDiv, 'small_pic')[0];
 25         
 26     var iNow=0;
 27     var percentX=0;
 28     var percentY=0;
 29     
 30     var dataSmall=[
 31         "http://i.niupic.com/images/2015/01/07/54ac9bf45e65c.png",
 32         "http://i.niupic.com/images/2015/01/07/54ac9bf6357fc.jpg",
 33         "http://i.niupic.com/images/2015/01/07/54ac9bf7b496c.jpg"
 34     ];
 35     
 36     var dataBig=[        
 37         "http://i.niupic.com/images/2015/01/07/54ac9c0aea734.png",    
 38         "http://i.niupic.com/images/2015/01/07/54ac9c0531242.jpg",
 39         "http://i.niupic.com/images/2015/01/07/54ac9bfb85484.jpg"
 40     ];
 41 
 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     var oImgs=oSmall.getElementsByTagName("img")[0];
 56         oImgs.src=dataSmall[0];
 57     var oImgb=oBig.getElementsByTagName("img")[0];
 58         oImgb.src=dataBig[0];
 59         dataSmall.push(dataSmall.shift());
 60         dataBig.push(dataBig.shift());
 61     
 62     function Imglocation(){
 63         oImgb.style.left=-percentX*(oImgb.offsetWidth-oBig.offsetWidth)+"px";
 64         oImgb.style.top=-percentY*(oImgb.offsetHeight-oBig.offsetHeight)+"px";
 65     }
 66     
 67     
 68     oMark.onclick=function(){
 69 
 70            iNow++;
 71               
 72            oImgs.src="";
 73            oImgb.src="";
 74               
 75            if(iNow>dataSmall.length){
 76               iNow=1;      
 77            }  
 78               
 79         oImgs.src=dataSmall[iNow-1];
 80         oImgb.src=dataBig[iNow-1];
 81 
 82         Imglocation();
 83 
 84     };
 85     
 86     oMark.onmousemove=function (ev)
 87     {
 88         var oEvent=ev||event;
 89         var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
 90         var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;
 91         
 92         if(l<0){
 93             l=0;
 94         }else if(l>oMark.offsetWidth-oFloat.offsetWidth){
 95             l=oMark.offsetWidth-oFloat.offsetWidth;
 96         }
 97         
 98         if(t<0){
 99             t=0;
100         }else if(t>oMark.offsetHeight-oFloat.offsetHeight){
101             t=oMark.offsetHeight-oFloat.offsetHeight;
102         }
103         
104         oFloat.style.left=l+'px';
105         oFloat.style.top=t+'px';
106 
107         percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);
108         percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);
109         
110         Imglocation();
111 
112     };
113 };

梦里花落0921

浏览 482回答 1

1回答

随时随地看视频慕课网APP