Javascript脚本特效示例:[7]字符围绕鼠标
1、在桌机上新建文本文档,命名为晓博JavaScript特效测试.txt,在文本文档里中入HTML文档的基本元素如下,并保存。
<html>
<head>
<title>晓博JavaScript特效测试</title>
</head>
<body>
<div id="zy">
<div id="login"></div>
<div id="daohang">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="jianjie.html">七夕简介</a></li>
<li><a href="#">七夕节传说</a></li>
<li><a href="#">七夕节习俗</a></li>
<li><a href="#">诗词& 歌谣</a></li>
<li><a href="#">七夕节寄语</a></li>
</ul>
</div>
</div>
</body>
</html>
![Javascript脚本特效示例:[7]字符围绕鼠标](https://exp-picture.cdn.bcebos.com/30601b6104a355e969602a64d22ae3efe1786866.jpg)
![Javascript脚本特效示例:[7]字符围绕鼠标](https://exp-picture.cdn.bcebos.com/82eff6d7592ae3ef0eb6d68254b6326c56666466.jpg)
2、把如下代码加入<head>区域中,并重名文档为HTML文件
<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<5)val=setInterval("show("+(i+1)+")",20);
}
fontSize=s;
}
}
function start()
{ for(i=1;i<=5;i++)
{
val=setInterval("show(1)",20);
setInterval("follow("+i+")",100);
}
}
//-->
</SCRIPT>
<SCRIPT language=javascript>
var word=new Array(5);
word[1]="w";word[2]="x";word[3]="b";word[4]="j";word[5]="s";
for(i=1;i<=5;i++)
document.write("<div id='word"+i+"' style='width:20px;height:20px;position:absolute;font-size:1000;visibility:hidden'><font face='Forte' color='#00FF00'>"+word[i]+"</font></div>");start();
</SCRIPT>
![Javascript脚本特效示例:[7]字符围绕鼠标](https://exp-picture.cdn.bcebos.com/332d496699cf0253daade1366b36e29146e85f66.jpg)
3、用IE浏览器打开晓博JavaScript特效测试.html文件,可以看到字符围绕鼠标特效,如下图
![Javascript脚本特效示例:[7]字符围绕鼠标](https://exp-picture.cdn.bcebos.com/22c4fe36e29147e8c92efbc1b603bbea3f865866.jpg)
![Javascript脚本特效示例:[7]字符围绕鼠标](https://exp-picture.cdn.bcebos.com/32a127723d03bbeac048f2fbea43d7d449315466.jpg)
![Javascript脚本特效示例:[7]字符围绕鼠标](https://exp-picture.cdn.bcebos.com/baab208630486143d61b8a828febf6a75e0f5366.jpg)