一个放大镜点击的问题
0
悬赏园豆：40
[已解决问题]
解决于 2015-01-13 12: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 <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 };
最佳答案
0
首先提醒下楼主的css有语法错误。
filter:alpha(opacity=30); //filter:alpha(opacity=?)后面是=不是:
虽然我不懂js，但上次在网上看到过类似js插入图片的问题，只记得说用js插入图片时要提前载入图片。然后我就试着将楼主的代码复制下来放到dw中测试了一下，真的解决了问题。
楼主的代码不做修改，只在闭合body前添加一个隐藏的div，里面放3张大图。
<div style="display:none"> <!--页面中隐藏大图--> <img src="http://i.niupic.com/images/2015/01/07/54ac9c0aea734.png" /> <img src="http://i.niupic.com/images/2015/01/07/54ac9c0531242.jpg" /> <img src="http://i.niupic.com/images/2015/01/07/54ac9bfb85484.jpg" /> </div>
反正我这样修改后，每次点击小图(鼠标指针不移动)时，大图都能准确对准位置。不知道是不是正解
收获园豆：40
我也用过js提前载入图片,但是还会显示不了，所以我就删掉了，你这样隐藏是有用
但做开发不会这样去做的
现在就是缓存过的图片和你这个直接放在网站不知道他们差在什么地方了！！！
var iCur=0; loadImg(); function loadImg(){ oImage.src=dataBig[iCur]; oImage.onload=function(){ iCur++; if(iCur<dataBig.length){ loadImg(); } } };