经典:两段不错的JS特效!

时间:2009-02-05 10:25:33  来源:第二电脑网上收集  作者:第二电脑网

  第二电脑网导读:.ccopus.com">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");
  正文:

<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://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/ target=_blank class=infotextkey>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>


"经典:两段不错的JS特效!"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/2009-02-05/9215.html


关键字:

关于《经典:两段不错的JS特效!》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td