浮动图片(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;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>