发新贴  快速回复

之前官网放大镜的问题

攻城师Mr.严
2015-01-09 09:51
 本帖最后由 攻城师Mr.严 于 2015-1-9 09:52 编辑 

[align=left]当打开浏览器第一次点击(不要去移动)的时候,点击显示下一张图,那个相对应的大图位置有问题,[/align][align=left]当点过几次后就不会了[/align][align=left]我要怎么在点击的时候就算好大图相对应的位置呢[/align][align=left]谁能帮我修正下[/align]

html
<!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>
  cssbody{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; }js
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.err==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.err==function ()
        {
                oFloat.style.display='block';
                oBig.style.display='block';
        };
        
        oMark.err==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.err==function(){
               iNow++;
               oImgs.src="";
               oImgb.src="";
               if(iNow>dataSmall.length){
                  iNow=1;          
               } 
                oImgs.src=dataSmall[iNow-1];
                oImgb.src=dataBig[iNow-1];
                Imglocation();
        };
        
        oMark.err==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();
        };
};



无为
把文件打包以附件形式发上来。。
2015-01-12 12:54  回复本帖
攻城师Mr.严
forum.php?mod=redirect&goto=findpost&pid=34738&ptid=11280
把文件打包以附件形式发上来。。

发了,辛苦了。。。
2015-01-12 13:02  回复本帖
无为
forum.php?mod=redirect&goto=findpost&pid=34742&ptid=11280
发了,辛苦了。。。

原因很简单,你点击换了新的图片,新图片没有加载完成之前宽度和高度是获取不到的,而图片加载完成需要时间,所以你应该像上面调用 loadImg() 方法那样,在新图片加载完成之后,再去调用 Imglocation(); 函数,否则就会出问题。

2015-01-12 13:16  回复本帖
扯淡那些伤
看起来好难
2015-01-12 17:20  回复本帖
攻城师Mr.严
forum.php?mod=redirect&goto=findpost&pid=34744&ptid=11280
原因很简单,你点击换了新的图片,新图片没有加载完成之前宽度和高度是获取不到的,而图片加载完成需要时 ...

    我不是用loadImg()方法把所有大图都加载完了吗?
    点击的时候不都是已经加载完了的图片么?
2015-01-12 17:40  回复本帖
无为
forum.php?mod=redirect&goto=findpost&pid=34759&ptid=11280
我不是用loadImg()方法把所有大图都加载完了吗?
    点击的时候不都是已经加载完了的图片么?
 ...

你只是加载了你默认的第一张图片,点击切换的时候你把原来的图片地址删除了,换了一个新图片。

更换图片的地址,就会导致图片重新加载。。。

2015-01-12 19:39  回复本帖
攻城师Mr.严
forum.php?mod=redirect&goto=findpost&pid=34766&ptid=11280
你只是加载了你默认的第一张图片,点击切换的时候你把原来的图片地址删除了,换了一个新图片。

更换图片 ...

    老师按你这样说我把 给去了oImgs.src="";   还有这两个,可是下面这两个去掉了,好像可以了,但第一张图片又重复两次了,   所以老师能不能按你的思路帮我改正下
dataSmall.push(dataSmall.shift());
        dataBig.push(dataBig.shift());


2015-01-12 20:59  回复本帖
无为
forum.php?mod=redirect&goto=findpost&pid=34774&ptid=11280
老师按你这样说我把 给去了   还有这两个,可是下面这两个去掉了,好像可以了,但第一张图片又重复两 ...

    oMark.err==function(){

           iNow++;
              
           oImgs.src="";
           oImgb.src="";
              
           if(iNow>dataSmall.length){
              iNow=1;      
           }  

        oImgb.err= = function(){

          Imglocation();
          
        };
              
            oImgs.src=dataSmall[iNow-1];
        oImgb.src=dataBig[iNow-1];

    };只是加一个 err= 事件而已,这个不难理解吧...

2015-01-12 21:57  回复本帖
攻城师Mr.严
forum.php?mod=redirect&goto=findpost&pid=34777&ptid=11280
只是加一个 err= 事件而已,这个不难理解吧...

太好理解 了,谢谢老师{:soso_e113:}
2015-01-13 10:31  回复本帖
登录 后才可以发表回复