js实现文字围绕鼠标跳动显示效果-网页编程网

当前位置：主页 >> 网页特效 >> 正文

js实现文字围绕鼠标跳动显示效果

阅读：4203 输入：2016-11-05 09:16:21

<html>
<head>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<title>围绕鼠标旋转的跳动文字</title>
</head>
<body>
<script language="javascript">
var cx=0;
var cy=0;
var val=0;
function locate()
{ cx=window.event.x;
 cy=window.event.y;
}
document.onmousemove=locate;
function follow(i){ var x;
 if(i<4)x=cx-50+i*10;
 else x=cx-25+i*10;
 var y=cy-20+Math.floor(Math.random()*40);
 w=eval("word"+i);
 with(w.style)
 {
 left=x.toString()+"px";
 top=y.toString()+"px";
 }
}
function show(i){
 var w=eval("word"+i);
 with(w.style) {
 visibility="visible";
 s=parseInt(fontSize);
 if(s>=200)s-=100;
 else if(s>90&&s<=100)
  {
  s-=85;
  clearInterval(val);
  if(i<8)val=setInterval("show("+(i+1)+")",20);
  }
 fontSize=s;
 }
}
function start(){ for(i=1;i<=8;i++){
 val=setInterval("show(1)",20);
 setInterval("follow("+i+")",100);
 }
}
var word=new Array(8);
word[1]="你";word[2]="迎";word[3]="来";word[4]="站";word[5]="长";
word[6]="你";word[7]="是";word[8]="人";
 for(i=1;i<=8;i++)
  document.write("<div id='word"+i+"' style='width:20px;height:20px;position:absolute;font-size:1000;visibility:hidden'><font face='Forte' color='#cc0000'>"+word[i]+"</font></div>");start();
</script>
</body>
</html>

相关阅读: js打印文字打字输出特效代码; HTML5模仿骇客帝国文字矩阵效果; JavaScript文字虚幻抖动