频道直达
-
学院
-
下载
-
交易
-
特效
-
字库
-
手册
-
排名
-
工具
-
繁體
设为首页
加入收藏
联系我们
建站搜索:
软件下载
新闻资讯
常用广告代码
用户注册
|
用户登陆
您当前的位置:
中国建站之家
->
网站开发设计技术教程
->
JavaScript教程
->
两段不错的JS特效!
两段不错的JS特效!
作者:未知
来源:www.jz123.cn
发布时间:2007-9-12 8:37:00
发布人:圈圈
减小字体
增大字体
颜色
默认
灰度
橄榄色
绿色
蓝色
褐色
红色
特效二(创意来字被置定的那个特效):
<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="<i>javascript</i>: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>
提示:您可以先修改部分代码再运行
特效一:
<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="<i>javascript</i>:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon Studio</a> <a href="<i>javascript</i>:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Sunrise_Chen</a> <a href="<i>javascript</i>:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">www.ccopus.com</a> <p> <a href="<i>javascript</i>:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon Asp Check</a> <a href="<i>javascript</i>:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon Counter 6</a> <a href="<i>javascript</i>:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon Disk Manager 4.5</a> <a href="<i>javascript</i>:void(0);" onclick="alert(innerText)" onmouseover="CocoonStudio.DHtml.LinkStyle01.MouseOver()">Cocoon MS-Access DbAdmin 1.0</a> </body> </html>
提示:您可以先修改部分代码再运行
将本文收藏到QQ书签与更多好友分享
[
打 印
]
[]
[
返回上一页
] [
收 藏
]
上一篇文章:
如何在表单中改字体的颜色?
下一篇文章:
在小方框中浏览大图
∷相关文章评论∷ (评论内容只代表网友观点,与本站立场无关!) [
更多评论
...]
精彩推荐
热门文章
·
注册码大全二
·
注册码大全四
·
注册码大全一
·
要10G免费网络硬盘的请进..
·
通过google 赶快来赚美金..
·
注册码大全十
·
头像-qq头像(qq新头像)4..
·
让你轻松架设FTP服务器1..
·
注册码大全三
·
梦幻背景图片7
·
卡通动物图片6
·
网页制作素材-按钮素材2..
·
让你轻松架设FTP服务器5..
·
风景图片8
·
注册码大全九
·
让你轻松架设FTP服务器2..
关注此文读者还看过
·
建站心得:网站规划书的..
·
Flash 神奇遮罩之图片篇..
·
Google购网络字处理软件..
·
企业网站赢利模式的思考..
·
邹键SQL通用分页存储过程..
·
中国首份网络婚恋交友报..
·
重构WEB
·
UNIX下ORACLE数据库的创..
·
盛大前副经理非法制售游..
·
近7000网民联名签名 反对..
·
一个模仿oso的论坛程序(..
·
第2季度我国B2C电子商务..
·
有趣的Flash鼠标跟随效果..
·
DreamwaverMX与ASP.NET(..
·
首例站长诉告谷歌Adsens..
·
ASP.NET2.0:在使用web.s..
相关文章
关于本站
-
网站帮助
-
广告合作
-
下载声明
-
友情连接
-
网站地图
-
人才招聘
网站合作、内容监督、商务咨询:QQ: 9576619
Copyright ? 2005--2008 中国建站之家版权所有
粤ICP备05092265号