位置：首页>> 网络编程>> JavaScript>> 两段不错的JS文字特效

两段不错的JS文字特效

作者：Sunrise_Chen　来源：蓝色理想　发布时间：2007-09-27 12:52:00　

标签：文字,特效

Hello every, 我是Sunrise_Chen，有人知道我吗？
好久没来这里了，以前偶尔会来这里潜水
今天心情很好，写了几个特效果。

特效一：
<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()">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.ccopus.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>

特效二（创意来字被置定的那个特效）：
<html><head><title>Link Style02 - Cocoon Studio</title><SCRIPT LANGUAGE="JavaScript">CocoonStudio = function(){/* Published by Cocoon Studio. Url: www.ccopus.com */}CocoonStudio.DHtml = function(){/* Author: Sunrise_Chen Email: sunrise_chen@msn.com */}CocoonStudio.DHtml.LinkStyle02 = function(){/* CocoonStudio连接特效02 */}CocoonStudio.DHtml.LinkStyle02.TemplteDiv = document.createElement("DIV");CocoonStudio.DHtml.LinkStyle02.ActionCount = 8;CocoonStudio.DHtml.LinkStyle02.SizeStep = 4;CocoonStudio.DHtml.LinkStyle02.FadeStep = 5;CocoonStudio.DHtml.LinkStyle02.FadeMax = 25;CocoonStudio.DHtml.LinkStyle02.OffsetWidth = 16;CocoonStudio.DHtml.LinkStyle02.OffsetHeight = 8;CocoonStudio.DHtml.LinkStyle02.Timer = 0;CocoonStudio.DHtml.LinkStyle02.ToX = 0;CocoonStudio.DHtml.LinkStyle02.ToY = 0;CocoonStudio.DHtml.LinkStyle02.CurrentX = 0;CocoonStudio.DHtml.LinkStyle02.CurrentY = 0;CocoonStudio.DHtml.LinkStyle02.StepWidth = 0;CocoonStudio.DHtml.LinkStyle02.StepHeight = 0;CocoonStudio.DHtml.LinkStyle02.IsMoving = false;CocoonStudio.DHtml.LinkStyle02.Initial = function(){with(CocoonStudio.DHtml.LinkStyle02.TemplteDiv){with(style){position = "absolute"; width = height = left = top = 0; display = "none";backgroundColor = "#80FF00"; border = "1px solid #008000"; cursor = "hand";filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";zIndex = -1;}}document.body.insertAdjacentElement("beforeEnd",CocoonStudio.DHtml.LinkStyle02.TemplteDiv);}CocoonStudio.DHtml.LinkStyle02.MouseOver = function(sender){with(CocoonStudio.DHtml.LinkStyle02){var iAddSize = this.ActionCount * this.SizeStep * 2;var oSrc = event.srcElement;var o = CocoonStudio.DHtml.LinkStyle02.TemplteDiv;this.CurrentX = o.offsetLeft; CurrentY = o.offsetTop;ToX = event.x + document.body.scrollLeft - event.offsetX - (OffsetWidth / 2);ToY = event.y + document.body.scrollTop - event.offsetY - (OffsetHeight / 2);//StepWidth = 0.08*(ToX - CurrentX) ;//StepHeight = 0.08*(ToY - CurrentY) ;StepWidth = (ToX - CurrentX) / ActionCount ;StepHeight = (ToY - CurrentY) / ActionCount ;if(StepWidth>0) StepWidth = Math.ceil(StepWidth); else StepWidth = Math.floor(StepWidth);if(StepHeight>0) StepHeight = Math.ceil(StepHeight); else StepHeight = Math.floor(StepHeight);o.style.width = oSrc.scrollWidth + OffsetWidth;o.style.height = oSrc.scrollHeight + OffsetHeight;o.style.display = '';oSrc.onmouseout = MouseOut;//o.onmouseout = MouseOut;//o.onclick = oSrc.click; IsMoving = true;FadeIn();}}CocoonStudio.DHtml.LinkStyle02.MouseOut = function(){with(CocoonStudio.DHtml.LinkStyle02){if(IsMoving) return;IsMoving = true;FadeOut();}}CocoonStudio.DHtml.LinkStyle02.FadeIn = function(){with(CocoonStudio.DHtml.LinkStyle02){with(TemplteDiv){var iFade = filters[0].opacity;if(iFade<=(this.FadeMax-this.FadeStep)) filters[0].opacity += this.FadeStep;with(style){pixelTop += this.StepHeight; pixelLeft += this.StepWidth;if(Math.abs(pixelTop - this.ToY) <= Math.abs(this.StepHeight)) pixelTop = this.ToY;if(Math.abs(pixelLeft - this.ToX) <= Math.abs(this.StepWidth)) pixelLeft = this.ToX;if(pixelTop == this.ToY && pixelLeft == this.ToX && iFade >= this.FadeMax){ this.IsMoving = false;return;}}}clearTimeout(Timer); Timer = setTimeout("CocoonStudio.DHtml.LinkStyle02.FadeIn()", 25);}}CocoonStudio.DHtml.LinkStyle02.FadeOut = function(){with(CocoonStudio.DHtml.LinkStyle02){with(TemplteDiv){var iFade = filters[0].opacity;if(iFade>=FadeStep) filters[0].opacity -= FadeStep;else{CocoonStudio.DHtml.LinkStyle02.IsMoving = false;filters[0].opacity = 0; style.display='none';return;}}clearTimeout(Timer); Timer = setTimeout("CocoonStudio.DHtml.LinkStyle02.FadeOut()",25);}}window.onload = CocoonStudio.DHtml.LinkStyle02.Initial;</SCRIPT><script language="JavaScript" event="onmouseover" for="CcLS02Menu">CocoonStudio.DHtml.LinkStyle02.MouseOver(this);</script><style>body, td{font-size: 9pt;}td{cursor: hand;}</style></head><body><TABLE cellpadding=0 cellspacing=10><TR><TD id="CcLS02Menu"><a href="http://club.pchome.net/forum.php?topic=19">PCHOME.net Club - ASP</a></TD><TD><a href="http://www.ccopus.com" id="CcLS02Menu">Our Cocoon Studio</a></TD></TR><TR><TD id="CcLS02Menu">Sunrise_Chen</TD><TD id="CcLS02Menu" onclick="alert('我的工作室')">Cocoon Studio</TD></TR><TR><TD id="CcLS02Menu">Cocoon Counter 6</TD><TD id="CcLS02Menu">Cocoon asp 探针</TD></TR><TR><TD id="CcLS02Menu">PCHOME.net Club - ASP</TD><TD id="CcLS02Menu" id="CcLS02Menu"></TD></TR><TR><TD id="CcLS02Menu">这是一个单元格</TD><TD><a id="CcLS02Menu" href="javascript:alert('Welcome to our Cocoon Studio');">这是一个连接</a></TD></TR><TR><TD><div id="CcLS02Menu">这是一个DIV</div></TD><TD><STRONG id="CcLS02Menu">这是一个STRONG标签</STRONG></TD></TR></TABLE><div style="position:absolute;top:200;left:200;width:200;text-align:center;cursor:hand;border:1px solid gray" id="CcLS02Menu">这是一个浮动的层</div></body></html>

投稿

两段不错的JS文字特效

猜你喜欢