js关于一个效果放大镜的效果显示问题

123456qweqwe 发布于 2015/01/08 11:16
阅读 1K+
收藏 0

当打开浏览器第一次点击的时候,点击显示下一张图,那个相对应的大图位置有问题,当点过几次后就不会了,我要怎么在点击的时候就算好大图相对应的位置呢

谁能帮我修正下


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="miaov.js"></script>
</head>
<body>

<div id="div1">

 <div class="small_pic">

<span class="mark"></span>
        <span class="float_layer"></span>
        <img src="#" width="100%" height="100%"/>
    </div>


    <div class="big_pic"><img src="#" /></div>
</div>
</body>
</html>

-------------------------------------css--------------------------

<style type="style.css">

body{margin:0;padding:0;}

#div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; }

#div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative; }
#div1 .float_layer { width: 100px; height: 100px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; 
}
#div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; 
filter:alpha(opacity:0); 
opacity:0;
}
#div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; 
border:2px solid #CCC; 
display:none; 
}
#div1 .big_pic img { 
position:absolute; 
top: -48px; 
left: -100px; 
}

</style>

---------------------------------------js-----------------------------------

<script type="text/javascript">

function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aTmp=[];
var i=0;
for(i=0;i<aEle.length;i++){
if(aEle[i].className==sClass){
aTmp.push(aEle[i]);
}
}
return aTmp;
}


window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oMark=getByClass(oDiv, 'mark')[0];//整个图片透明区
var oFloat=getByClass(oDiv, 'float_layer')[0];//移动的小框
var oBig=getByClass(oDiv, 'big_pic')[0];
var oSmall=getByClass(oDiv, 'small_pic')[0];

var iNow=0;
var percentX=0;
var percentY=0;

var dataSmall=[
   "http://i.niupic.com/images/2015/01/07/54ac9bf45e65c.png",
   "http://i.niupic.com/images/2015/01/07/54ac9bf6357fc.jpg",
   "http://i.niupic.com/images/2015/01/07/54ac9bf7b496c.jpg"
];

var dataBig=[    
   "http://i.niupic.com/images/2015/01/07/54ac9c0aea734.png",    
   "http://i.niupic.com/images/2015/01/07/54ac9c0531242.jpg",
   "http://i.niupic.com/images/2015/01/07/54ac9bfb85484.jpg"
];



oMark.onmouseover=function ()
{
oFloat.style.display='block';
oBig.style.display='block';
};

oMark.onmouseout=function ()
{
oFloat.style.display='none';
oBig.style.display='none';
};

var oImgs=oSmall.getElementsByTagName("img")[0];
   oImgs.src=dataSmall[0];
var oImgb=oBig.getElementsByTagName("img")[0];
   oImgb.src=dataBig[0];
        dataSmall.push(dataSmall.shift());
        dataBig.push(dataBig.shift());
    
    function Imglocation(){
oImgb.style.left=-percentX*(oImgb.offsetWidth-oBig.offsetWidth)+"px";
oImgb.style.top=-percentY*(oImgb.offsetHeight-oBig.offsetHeight)+"px";
}
    
    oMark.onclick=function(){
        iNow++;      
        oImgs.src="";
        oImgb.src="";
          
        if(iNow>dataSmall.length){
          iNow=1;  
        }  
          
       oImgs.src=dataSmall[iNow-1];

       oImgb.src=dataBig[iNow-1];

        Imglocation();


};

oMark.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;

if(l<0){
l=0;
}else if(l>oMark.offsetWidth-oFloat.offsetWidth){
l=oMark.offsetWidth-oFloat.offsetWidth;
}

if(t<0){
t=0;
}else if(t>oMark.offsetHeight-oFloat.offsetHeight){
t=oMark.offsetHeight-oFloat.offsetHeight;
}

oFloat.style.left=l+'px';
oFloat.style.top=t+'px';
percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);
percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);
Imglocation();
};
};

<script>

加载中
0
挨踢旅行者
挨踢旅行者
你这上面根本就没有点击的东西,就只有两张图片,再说了,js代码不是包含在script标签中吗?
1
123456qweqwe
oMark.onclick 这个是点击 那个style我写错了
0
挨踢旅行者
挨踢旅行者
我仔细看了下,你把最外层的 #div1 的position设置为relative,而这个 #div1 里面包含有两个 div:分别是class为 small_pic 和 class为 big_pic 的div,你把small_pic 的position 设置为relative,而big_pic 的position 设置为absolute,你设置的这个让人看不懂啊,太乱了。如果你想让 small_pic 和 big_pic 相对于 #div1进行定位,那应该先把 #div1 的position 值设置为 absolute,再把 small_pic 和 big_pic 的position 值设置为 relative。还有我把你的代码复制下来在浏览器中试了下,你说的oMark这东东根本就没有显示啊,我还是加了两个字才显示的。看下图:
0
1
123456qweqwe

重新排了下div,不过还是不行

body{margin:0;padding:0;}
#div1 { 
width: 600px; 
height: 200px; 
padding: 5px; 
margin:0px auto;
position: relative;
}
#div1 .small_pic { 
width: 200px; 
height: 200px; 
background: #eee; 
position: relative; 
float:left;
display:inline;
overflow:hidden;
}
#div1 .float_layer { 
width: 100px; 
height: 100px; 
border: 1px solid #000; 
background: #fff; 
filter: alpha(opacity: 30); 
opacity: 0.3;
position: absolute; 
top: 0; 
left: 0; 
display:none; 
}
#div1 .mark {
width:100%; 
height:100%; 
position:absolute; 
z-index:2; 
left:0px; 
top:0px; 
background:red; 
filter:alpha(opacity:0); 
opacity:0;
}
#div1 .big_pic { 
width:250px; 
height:250px; 
overflow:hidden; 
border:2px solid #CCC; 
display:none;
position:relative;
    float:left;
}
#div1 .big_pic img{
top:0;
left:0;
position:absolute;
}


返回顶部
顶部