用JSP做出非常炫的鼠标动态效果
作者：佚名 2008年07月01日 来源:中国站长站
效果演示图
| <html> <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()">chinaz.com</a> <a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">chinaz.com</a> <a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">chinaz.com</a> <p> <a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">chinaz.com</a> <a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">chinaz.com</a> <a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">chinaz.com</a> <a href="javascript:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">chinaz.com</a> </body> </html> |
声明：本站所发表的文章与图片仅代表作者本人观点，与本站立场无关。若文章侵犯了您的相关权益，请及时与我们联系，我们会及时处理，感谢您对本站的支持！联系邮箱：editor@untx.com。
