• 2008-07-10

    图片点击选中和滑动放大的js代码(兼容ie&ff) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/24475692.html

    写了两个效果。存档。
    <script>
    lastobj=null;
    function set(aobj)
    {
    i=document.all?0:1;
    if(lastobj!=null)
    {
    lastobj.style.background='';
    lastobj.parentNode.childNodes[i].style.visibility='hidden';
    }
    aobj.style.background='orange';
    aobj.parentNode.childNodes[i].style.visibility='visible';
    lastobj=aobj;
    }
    mydo=null;
    mydo2=null;
    obj=null;
    small=99;
    big=299;
    speed=2;
    function getAbsoluteLeft( ob ){
    if(!ob){return null;}
      var obj = ob;
      var objLeft = obj .offsetLeft;
      while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
        objLeft += obj .offsetParent.offsetLeft;
        obj = obj .offsetParent;
      }
    return objLeft ;
    }
    function getAbsoluteTop( ob ){
    if(!ob){return null;}
    var obj = ob;
    var objTop = obj .offsetTop;
    while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
      objTop += obj .offsetParent.offsetTop;
      obj = obj .offsetParent;
    }
    return objTop ;
    }
    function myover()
    {
    clearTimeout(mydo2);
    if(obj.width>=big){return;}
    obj.width+=speed;
    obj.height+=speed;
    mydo=setTimeout(myover,10);
    }
    function myout()
    {
    clearTimeout(mydo);
    if(obj.width<=small){return;}
    obj.width-=speed;
    obj.height-=speed;
    mydo2=setTimeout(myout,10);
    }
    function myset(myobj)
    {
    document.getElementById("myimg").src=myobj.src;
    document.getElementById("myimg").width=small;
    document.getElementById("myimg").height=small;
    document.getElementById("myimg").style.display="block";
    document.getElementById("mydiv").style.top=getAbsoluteTop(myobj)+"px";
    document.getElementById("mydiv").style.left=getAbsoluteLeft(myobj)+"px";
    }
    </script>
    <body>
    <div style="width:54px;float:left">
    <center>
    <div style="width:2px;border-left:8px solid #FFFFFF; border-top:8px solid #FFFFFF; border-right:8px solid #FFFFFF; border-bottom:8px solid orange;visibility:hidden"></div>
    <div style="float:left;width:54px;height:54px;cursor:pointer" onmouseover="if(this!=lastobj)this.style.background='#ddd'" onmouseout="if(this!=lastobj)this.style.background=''" onclick="set(this)"><table width=100% height=100%><tr><td align=center valign=middle><div style="width:44px;height:44px;border:1px solid #ddd;background:white"><table width=100% height=100%><tr><td align=center valign=middle><img src=http://img04.mall.taobaocdn.com/malli/product/i4/080/9a0/T1HRpbXd4w9gxXXXXX.jpg_40x40.jpg></td></tr></table></div></td></tr></table></div>
    </center>
    </div>
    <div style="float:left">&nbsp;</div>
    <div style="width:54px;float:left">
    <center>
    <div style="width:2px;border-left:8px solid #FFFFFF; border-top:8px solid #FFFFFF; border-right:8px solid #FFFFFF; border-bottom:8px solid orange;visibility:hidden"></div>
    <div style="float:left;width:54px;height:54px" onmouseover="if(this!=lastobj)this.style.background='#ddd'" onmouseout="if(this!=lastobj)this.style.background=''" onclick="set(this)"><table width=100% height=100%><tr><td align=center valign=middle><div style="width:44px;height:44px;border:1px solid #ddd;background:white"><table width=100% height=100%><tr><td align=center valign=middle><img src=http://img04.mall.taobaocdn.com/malli/product/i4/f51/b60/T16RpbXaxo9gxXXXXX.jpg_40x40.jpg></td></tr></table></div></td></tr></table></div>
    </center>
    </div>
    <div id=mydiv style="position:absolute"><img id="myimg" style="display:none;cursor:pointer" onmouseover='obj=this;myover()' onmouseout='obj=this;myout()'/></div>
    <center>
    <table width=60% border="0"><tr valign="bottom" height="100" align="center">
    <td>&nbsp;</td>
    <script>
    goods="http://img03.mall.taobaocdn.com/malli/product/i3/dd1/690/T1wRpbXdRz9gxXXXXX.jpg_310x310.jpg,http://img02.mall.taobaocdn.com/malli/product/i2/e81/e01/T16GpaXgpg9gxXXXXX.jpg_310x310.jpg,http://img02.mall.taobaocdn.com/malli/product/i2/331/3e1/T1MIBbXnBm9cxXXXXX.jpg_310x310.jpg,http://img04.mall.taobaocdn.com/malli/product/i4/080/9a0/T1HRpbXd4w9gxXXXXX.jpg_310x310.jpg,http://img04.mall.taobaocdn.com/malli/product/i4/f51/b60/T16RpbXaxo9gxXXXXX.jpg_310x310.jpg";
    for(i=0;i<goods.split(",").length;i++)
    {
    document.write("<td><img style='cursor:pointer' src='"+goods.split(",")[i]+"' width="+small+" height="+small+"  onmouseover='myset(this)'></td>");
    }
    </script>
    <td>&nbsp;</td>
    </tr></table>
    </center>
    </body>
    分享到:

    评论

  • 很棒..