浮動圖片（JS）

weixin_34321977發表於2006-02-21
JS


程式碼作用：滑鼠上移到圖片上時，圖片浮動顯現，就像是Apple的浮動選單一樣的效果。
pic.JPG
pic1.JPG
<!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;width:"+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;"+"width:"+org+"px;"+"height:"+org+"px;");
  }
}

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

相關文章