一个效果问题
0
悬赏园豆：30
[已解决问题]
解决于 2015-01-11 10:41
当打开浏览器第一次点击的时候，点击显示下一张图，那个相对应的大图位置有问题，
当点过几次后就不会了
我要怎么在点击的时候就算好大图相对应的位置呢
谁能帮我修正下
http://jsbin.com/defivutequ/3/edit?js,output
最佳答案
0
无人回结
收获园豆：30
其他回答(1)
0
源码贴出来
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 };
麻烦了！！!
