Javascript脚本特效示例：字符围绕鼠标

Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。

创建HTML文件

首先，在桌机上新建文本文档，命名为晓博JavaScript特效测试.txt，并将以下代码粘贴到文档中：

lt;htmlgt;
lt;headgt;
    lt;titlegt;晓博JavaScript特效测试lt;/titlegt;
lt;/headgt;
lt;bodygt;
    lt;div id"zy"gt;
        lt;div id"login"gt;lt;/divgt;
        lt;div id"daohang"gt;
            lt;ulgt;
                lt;ligt;lt;a href""gt;首页lt;/agt;lt;/ligt;
                lt;ligt;lt;a href""gt;七夕简介lt;/agt;lt;/ligt;
                lt;ligt;lt;a href"""gt;七夕节传说lt;/agt;lt;/ligt;
                lt;ligt;lt;a href"""gt;七夕节习俗lt;/agt;lt;/ligt;
                lt;ligt;lt;a href"""gt;诗词amp;歌谣lt;/agt;lt;/ligt;
                lt;ligt;lt;a href"""gt;七夕节寄语lt;/agt;lt;/ligt;
            lt;/ulgt;
        lt;/divgt;
    lt;/divgt;
lt;/bodygt;
lt;/htmlgt;

然后将文本文档保存为HTML文件。

添加Javascript代码

在头部区域中添加以下Javascript代码，并将文档重命名为HTML文件：

lt;script language"javascript"gt;
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 lt; 4)
        x  cx - 50   i * 10;
    else
        x  cx - 25   i * 10;
    var y  cy - 20   Math.floor(Math.random() * 40);
    var w  eval("word"   i);
    with () {
        left  ()   "px";
        top  ()   "px";
    }
}
function show(i) {
    var w  eval("word"   i);
    with () {
        visibility  "visible";
        s  parseInt(fontSize);
        if (s > 200)
            s - 100;
        else if (s lt; 90 amp;amp; s gt; 100) {
            s - 85;
            clearInterval(val);
            if (i lt; 5)
                val  setInterval("show("   (i   1)   ")", 20);
        }
        fontSize  s;
    }
}
function start() {
    for (i  1; i lt; 5; i  ) {
        val  setInterval("show(1)", 20);
        setInterval("follow("   i   ")", 100);
    }
}
lt;/scriptgt;

这段Javascript代码实现了字符围绕鼠标的特效效果。

查看效果

用IE浏览器打开晓博JavaScript特效测试.html文件，你就可以看到字符围绕鼠标的特效效果。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。