• 浮动图片(JS)



    代码作用:鼠标上移到图片上时,图片浮动显现,就像是Apple的浮动菜单一样的效果。


    <!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 profile="http://gmpg.org/xfn/11">
     <link rel="stylesheet" href="http://ilyagram.org/wp/wp-content/themes/ilya/style.css" type="text/css" media="screen" />
    </head>
    <body>
    <div id="rap">
    <div id="header">
      <div id="randomphotos">
      
      <div id="photodock" style="valign:bottom;padding:5px;height:80px;" onmouseover="imgEnlarge(event)" onmouseout="imgNormal(event)">
      <script type="text/javascript" src="http://www.flickr.com/badge_code.gne?nsid=90458343@N00&amp;count=8&amp;display=random&amp;name=0&amp;size=square&amp;raw=1">
     </script>
      </div>
      <script>
     var org = 40;
     var aft = 80;
     var dockdiff = aft -org;
     dock = document.getElementById("photodock");
     dockimgs = dock.getElementsByTagName("img");
     resettonormal();
     function getMyTarget(evt){
       if(!evt)  var evt = window.event;
       if (evt.target) obj = evt.target;
       else if (evt.srcElement) obj = evt.srcElement;
      
       if (obj.nodeType == 3) // defeat Safari bug
       obj = obj.parentNode;
       return obj;
     }

     function imgEnlarge(evt){
       obj = getMyTarget(evt);

       name = obj.nodeName;
       if(name!="IMG" && name !="img"){
      return true;
       }
       currentIndex = -1;
       resettonormal();
       for(i=0;i<dockimgs.length;i++){
      if(dockimgs[i] == obj){
        currentIndex = i;
        break;
      }
       }
       resize(currentIndex, aft, aft);
       resize(currentIndex+1, org + dockdiff/2, org + dockdiff/2);
       resize(currentIndex+2, org + dockdiff/10, org + dockdiff/10);

       resize(currentIndex-1, org + dockdiff/2, org + dockdiff/2);
       resize(currentIndex-2, org + dockdiff/10, org + dockdiff/10);
    }

    function imgNormal(evt){
      obj = getMyTarget(evt);
      if(obj.getAttribute("id") == "photodock"){
        resettonormal();
      }
    }

    function resize(idx, w, h){
      if(idx < 0 || idx >= dockimgs.length) return;
      var obj = dockimgs[idx];
      if(obj==null) return false;
     
    // for IE
      obj.style.marginTop = "0px";
      obj.style.width = w+"px";
      obj.style.height = h+"px";
    // end for ie;
     
      obj.setAttribute("style", "margin-top:0px;"+w+"px;"+"height:"+h+"px;");
    }

    function resettonormal(){
      for(i=0;i<dockimgs.length;i++){
      // for IE
        dockimgs[i].style.marginTop = "0px";
        dockimgs[i].style.width = org+"px";
        dockimgs[i].style.height = org+"px";
      // end for ie;
        dockimgs[i].setAttribute("style", "margin-top:"+dockdiff+"px;"+""+org+"px;"+"height:"+org+"px;");
      }
    }

    </script>
      </div>
    </div>
      
    </body>
    </html>

  • 相关阅读:
    unittest框架assert断言
    python logging 总结
    好文章推荐 数据库mysql
    python 日志模块 日志格式
    django admin 后台总结(转载)
    xpath解析html标签
    lua 排序table.sort()用法
    lua 随机数 math.random()和math.randomseed()用法
    三种方法获取 lua时间戳
    crontab调用python脚本新思路
  • 原文地址:https://www.cnblogs.com/RuiLei/p/334892.html
Copyright © 2020-2023  润新知