站长论坛

标题: 用JavaScript 做出非常炫的鼠标动态效果 [打印本页]

作者: superadmin 时间: 2008-6-18 19:59
标题: 用JavaScript 做出非常炫的鼠标动态效果
效果演示图:

<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>

欢迎光临站长论坛 (https://tzlink.com/bbs/)