Javascript脚本特效示例:[7]字符围绕鼠标

2026-01-18 07:30:44

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]字符围绕鼠标

Javascript脚本特效示例:[7]字符围绕鼠标

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]字符围绕鼠标

3、用IE浏览器打开晓博JavaScript特效测试.html文件,可以看到字符围绕鼠标特效,如下图

Javascript脚本特效示例:[7]字符围绕鼠标

Javascript脚本特效示例:[7]字符围绕鼠标

Javascript脚本特效示例:[7]字符围绕鼠标

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢