您当前的位置: 首页 » JavaScript/JQuery编程 » 经典:两段不错的JS特效！
经典:两段不错的JS特效！
论坛链接
<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: [email]sunrise_chen@msn.com[/email] */}
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://bbs.chinahtml.com/">论坛</a></TD>
<TD><a href="http://www.chinahtml.com" id="CcLS02Menu">站长资讯</a></TD>
</TR>
<TR>
<TD id="CcLS02Menu">Sunrise_Chen</TD>
<TD id="CcLS02Menu" onclick="alert('站长资讯)">Chinahtml</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 Chinahtml');">这是一个连接</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="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>