经典:不错的JS特效css菜单效果

 
<!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" lang="UTF-8">
<head> 
<title>Link Style01 - Cocoon Studio</title> 
<script LANGUAGE="Javascript"> 
CocoonStudio = function(){} 
CocoonStudio.DHtml = function(){} 
CocoonStudio.DHtml.LinkStyle01 = function(){} 
CocoonStudio.DHtml.LinkStyle01.TemplteDiv = document.createElement("DIV"); 
with(CocoonStudio.DHtml.LinkStyle01.TemplteDiv){ 
with(style){ 
position = "absolute"; display = "none"; width = height = 0; 
backgroundColor = "#80FF00"; border = "1px solid #008000"; cursor = "hand"; 
filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=0,finishOpacity=0) BlendTrans(duration=1);"; 
} 
} 
CocoonStudio.DHtml.LinkStyle01.ActionCount = 10; 
CocoonStudio.DHtml.LinkStyle01.SizeStep = 4; 
CocoonStudio.DHtml.LinkStyle01.FadeStep = 10; 
CocoonStudio.DHtml.LinkStyle01.Timer = new Array(); 
CocoonStudio.DHtml.LinkStyle01.Items = new Array(); 
CocoonStudio.DHtml.LinkStyle01.Initial = function(){ 
document.body.insertAdjacentElement("beforeEnd",CocoonStudio.DHtml.LinkStyle01.TemplteDiv); 
} 
CocoonStudio.DHtml.LinkStyle01.MouseOver = function(){ 
var o; 
var iAddSize = this.ActionCount * this.SizeStep * 2; 
var oSrc = event.srcElement; 
var c = oSrc.sourceIndex; 
with(o=CocoonStudio.DHtml.LinkStyle01.TemplteDiv.cloneNode(true)){ 
with(style){ 
display = ''; width = oSrc.scrollWidth + iAddSize; height = oSrc.scrollHeight + iAddSize; 
pixelTop = oSrc.offsetTop - iAddSize / 2; pixelLeft = oSrc.offsetLeft - iAddSize / 2; 
} 
onclick = oSrc.click; 
onmouseout = new Function("CocoonStudio.DHtml.LinkStyle01.FadeOut("+c+");"); 
} 
CocoonStudio.DHtml.LinkStyle01.Items[c] = o; 
document.body.insertAdjacentElement("beforeEnd",o); 
this.FadeIn(c); 
setTimeout("CocoonStudio.DHtml.LinkStyle01.FadeOut("+c+");" ,1500); 
} 
CocoonStudio.DHtml.LinkStyle01.FadeIn = function(c,n){ 
if(!c) return; var p = n; if(!p) p = 0; 
var o = CocoonStudio.DHtml.LinkStyle01.Items[c]; if(!o) return; 
with(o){ 
var iFade = filters[0].opacity; 
if(iFade<=(100-this.FadeStep)) filters[0].opacity += this.FadeStep; 
with(style){ 
width = parseInt(width) - this.SizeStep*2; height = parseInt(height) - this.SizeStep*2; 
pixelTop += this.SizeStep; pixelLeft += this.SizeStep; 
} 
} 
if(p>=this.ActionCount-3) return; 
CocoonStudio.DHtml.LinkStyle01.Timer[c] = setTimeout("CocoonStudio.DHtml.LinkStyle01.FadeIn("+c+","+(++p)+");",50); 
} 
CocoonStudio.DHtml.LinkStyle01.FadeOut = function(c,n){ 
if(!c) return; var p = n; if(!p) p = this.ActionCount-1; 
clearTimeout(CocoonStudio.DHtml.LinkStyle01.Timer[c]); 
var o = CocoonStudio.DHtml.LinkStyle01.Items[c]; if(!o) return; 
with(o){ 
var iFade = filters[0].opacity; 
if(iFade>=this.FadeStep) filters[0].opacity -= this.FadeStep; 
with(style){ 
width = parseInt(width) + this.SizeStep; height = parseInt(height) + this.SizeStep; 
pixelTop -= this.SizeStep/2; pixelLeft -= this.SizeStep/2; 
} 
} 
if(p<=1){ o.removeNode(true); p=0; return; } 
setTimeout("CocoonStudio.DHtml.LinkStyle01.FadeOut("+c+","+(--p)+");",25); 
} 
window.onload = CocoonStudio.DHtml.LinkStyle01.Initial; 
</script> 
<script language="Javascript" event="onmousemove" for="CcLS02Menu"> 
CocoonStudio.DHtml.LinkStyle01.MouseOver(); 
</script> 
<style> 
body{ 
font-size: 9pt; 
} 
</style> 
</head> 
<body> 
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon Studio</a> 
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Sunrise_Chen</a> 
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">www.chinahtml.com.com</a> 
<p> 
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon Asp Check</a> 
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon Counter 6</a> 
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon Disk Manager 4.5</a> 
<a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon MS-Access DbAdmin 1.0</a> 
</body> 
</html>
点赞 (0)

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code