浮动图片（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&count=8&display=random&name=0&size=square&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>