网页特效精彩实例制作.docx

1、网页特效精彩实例制作飞翔鸟创作组 策划陈 峰 孙 威 等编著人 民 邮 电 出 版 社 图书在版编目(CIP)数据 网页特效精彩实例制作/陈峰，孙威编著 北京：人民邮电出版社，2001.9 ISBN 7-115-09653-8I 网 II 陈 孙 III 主 页 制 作 IV TP393.092中国版本图书馆 CIP 数 据 核 字 (2001)第 061003 号内 容 提 要本 书 主 要 讲 解 了 网 页 中 各 种 特 效 的 制 作 方 法 ， 全 书 分 为 13 章 ， 包 括 ： 文 本 特 效 、 时 间 与日期特效、图形图像特效、鼠标特效、背景特效、状态栏特效、菜单特效、

2、窗口特效、 按钮特效、表单功能特效、在线测试与游戏、Cookie 特效和多媒体特效等。本书以实例为基础，注重实用，适合广大的网页制作者阅读。网页特效精彩实例制作 编策著 划陈 峰 孙 威等 飞翔鸟创作组责任编辑 张立科 人民邮电出版社出版发行 北京市崇文区夕照寺街 14 号 邮编 100061 电子函件 网址 http:/ 北京汉魂图文设计有限公司制作 北京 印刷厂印刷 新华书店总店北京发行所经销 开本：7871092 1/16印张 24.5字数：569 千字 2001 年 9 月第 1 版印数：10 000 册 2001 年 9 月北京第 1 次印刷ISBN 7-115-09653-8/TP

3、2468定价：36.00 元关 于 本 书制作网页，最基本的语言就是 HTML， 但 是 HTML 是一种简洁的语言，它没有过多地 控 制 网 页 的 格 式 和 外 观 ， 只 是 定 义 了 网 页 的 结 构 和 各 元 素 的 功 能 。 要 让 我 们 的 网 页 更 加 富 于 变 化 ， 更 加 精 彩 ， 就 要 求 助 于 DHTML 以 及 其 他 一 些 工 具 ， 如 Fireworks、 Flash 等 。 其 中 DHTML 就是动态 HTML（Dyn amic HTML） ，它 是一些语言和技术规范的总称。包括脚本 语言 JavaScript、 VBScript

4、和一些技术规范 Document Object Model（文件目标 模块） 、 Layers（ 图 层 ） 和 Cascading Style Sheets（ CSS 样 式 表 ） 等 ， 所 有 这 些 语 言 和 工 具 实 现 的 效 果 ， 都 叫 做 网 页 特 效 。 本 书 中 的 网 页 特 效 主 要 是 使 用 脚 本 语 言 JavaScript 和 CSS 样 式 表 以 及 Fireworks、 Flash 制作的。JavaScript 语言是一种运行于客户端的脚本语言，浏览器可以直接解释执行 JavaScript 的 程 序 。 和 VBScript 相 比 ，

5、 JavaScript 语 言 更 成 熟 ， 对 不 同 浏 览 器 的 兼 容 性 也 更 好 ， 所 以 制 作网页特效的脚本语言一般都用 JavaScript。 JavaScript 语言是 一种面向对象的语言， 它的语 法 并 不 复 杂 ， 常 用 函 数 ， 对 象 及 对 象 的 属 性 、 方 法 都 不 多 ， 读 者 可 以 参 考 实 例 很 快 地 掌 握 这种脚本语言的用法。CSS 样 式 表 也 是 很 常 用 的 ， 它 是 近 几 年 才 发 展 起 来 的 新 技 术 ， 诞 生 于 1996 年 底 ， 1998 年 5 月 12 日 ， CSS 2.0

6、成 为 了 W3C 的 新 标 准 。 CSS 样 式 表 是 一 组 样 式 ， 简 单 地 说 ， 它 增 加 了更多的样式定义方式来辅助 HTML。 CSS 样式表最精彩的一部分是它的滤镜，可以用来 制 作 很 多 精 彩 的 效 果 。 本 书 中 很 多 特 效 都 是 JavaScript 结 合 CSS 样 式 表 实 现 的 。 利 用 Dreamweaver 的 CSS Styles 面板可以方便地为网页添加 CSS 样式。Fireworks 是 一个面向网页制作的图像处理软件。 用 Fireworks 可以制作各种图像和文字 的 效 果 ， 而 且 可 以 把 一 个 大

7、图 片 切 成 几 个 小 图 ， 可 以 设 置 图 片 的 热 点 区 域 ， 设 置 翻 转 图 等 动态效果。Flash 是 一 个 面 向 网 页 制 作 的 动 画 软 件 。 用 Flash 可 以 做 出 各 种 精 美 的 动 画 ， 而 且 Flash 的 ActionScript 可以通过 编程实现交互动画 ， ActionScript 的语 法类似 JavaScript， 并不难 学， 本书中第 11 章 “在线游戏与在线测试”中有两个用 Flash 做的交互性游戏。本 书 中 章 节 的 编 排 是 按 照 实 例 的 内 容 划 分 的 ， 其 中 实 现 相 同

8、主 题 的 特 效 ， 可 能 有 不 同 的 方 法 ， 比 如 做 彩 虹 文 字 ， 可 以 用 JavaScript， 也 可 以 用 Flash， 所 以 就 分 成 两 个 小 节 ， 彩 虹 文字之 JavaScipt 篇 和 彩 虹 文 字 之 Flash 篇。读者可以通过对比知道用两种方法实现的特效 有什么区别。用脚本语言做的特效实例通常分成 3 个 部 分 ： 效 果 、 原 理 、 源 代 码 。 其 中 效 果 部 分 解 释 特 效 的 效 果 ， 通 常 含 有 特 效 的 图 片 和 文 字 说 明 。 原 理 部 分 说 明 制 作 特 效 的 方 法 。 源

9、代 码 部 分 给 出 了 网 页 特 效 的 编 程 实 现 。 用 Flash、 Fireworks 做 的 特 效 实 例 分 成 3 部 分 ： 效 果 、 原 理、步骤，可能还会有源代码部分。因 为 本 书 篇 幅 有 限 ， 有 些 例 子 的 代 码 可 能 没 有 完 全 给 出 ， 只 列 出 一 部 分 或 者 列 出 针 对 1 IE 浏览器的代码，所有的代码可以在 http:/ 下载得到。 阅读本书的读者不必一定对 JavaScript 编程和 Flash、 Fireworks 等软件非常熟悉，只要对它们稍有了解，就可以通过阅读代码来制作精彩特效。本书中第 1、 3、

10、5、 7、 12、 13 章 由 孙 威 编 写 ， 第 2、 4、 6、 8、 9、 10、 11 章 由 陈 峰 编 写 。 在 编 写 过 程 中 ， 我 们 得 到 了 刘 杨 、 廖 明 毅 、 陈 以 肉 和 李 向 萍 的 大 力 支 持 和 鼓 励 ， 责 任 编 辑 张 立 科 通 读 了 本 书 的 初 稿 ， 为 本 书 的 完 善 提 出 了 许 多 宝 贵 的 建 议 ， 杨 枝 灵 女 士 为 本 书 的排版做了大量的工作，在这里一并表示衷心的感谢。尽 管 我 们 在 编 写 过 程 中 尽 量 做 到 正 确 无 误 ， 但 是 由 于 时 间 仓 促 ， 再 加

11、 上 我 们 水 平 有 限 ， 书中疏漏之处在所难免，希望读者能给我们提出宝贵的意见和建议。编者2001 年 9 月 2 目 录第 1 章 文 字 特 效 11.1 变色文字 21.1.1 文 字 逐 个 闪 烁 .21.1.2 彩 虹 文 字 之 CSS 滤镜篇 41.1.3 彩 虹 文 字 之 Flash 篇 71.1.4 文 字 连 续 变 色 .91.2 文本形状特效 101.2.1 阴 影 文 字 和 投 影 文 字 .101.2.2 立 体 文 字 .131.2.3 波 浪 文 字 .151.2.4 扭 曲 文 字 .171.2.5 光 晕 文 字 .191.2.6 图 形 变

12、形 为 文 字 .201.3 动态文本 211.3.1 “走 马 灯 ”文 字 .211.3.2 文 字 上 下 运 动 之 JavaScript 篇 .241.3.3 文 字 上 下 运 动 之 Dreamweaver 篇 .261.3.4 随 机 文 本 和 随 机 链 接 .271.3.5 飞 来 的 文 字 .301.3.6 文 字 逐 渐 显 示 .32第 2 章 时 间 与 日 期 特 效 .352.1 文字时钟 362.1.1 显 示 带 倒 影 的 时 间 .362.1.2 全 中 文 显 示 日 期 .382.1.3 JavaScript 时钟 .412.1.4 年 龄 计

13、算 .462.1.5 万 年 日 历 .532.2 图形时钟 642.2.1 精 美 电 子 钟 .642.2.2 Java 世界时钟 .682网页特效精彩实例制作第 3 章 图 形 图 像 特 效 .713.1 图像显示特效 723.1.1 图 片 更 替 特 效 .723.1.2 图 片 不 停 闪 动 .753.1.3 用 Fireworks 做 切 片 图 .773.1.4 用 Fireworks 做 阴 影 图 .783.1.5 翻 转 图 .803.1.6 图 像 叠 加 效 果 （ Fireworks 制 作 ） .843.2 图像运动特效 853.2.1 奔 驰 的 汽 车 .

14、853.2.2 图 片 自 由 运 动 .873.3 图片的控制 903.3.1 禁 止 图 片 下 载 .903.3.2 改 变 图 片 的 大 小 和 显 隐 .913.3.3 移 动 图 片 的 位 置 .93第 4 章 鼠 标 特 效 .994.1 鼠标事件 1004.1.1 显 示 鼠 标 坐 标 .1004.1.2 鼠 标 形 状 展 示 .1024.1.3 鼠 标 右 键 自 动 导 航 .1054.1.4 鼠 标 单 击 的 火 花 .1074.2 鼠标跟随 1134.2.1 跟 随 鼠 标 的 彩 色 文 字 .1134.2.2 围 绕 鼠 标 的 文 字 .1174.2.3

15、 不 停 转 动 的 世 界 .1194.2.4 魔 鬼 不 要 跟 着 我 .124第 5 章 背 景 与 页 面 特 效 .1315.1 背景动态特效 1325.1.1 夜 空 礼 花 .1325.1.2 向 下 运 动 的 背 景 .1375.1.3 星 空 文 字 .1395.1.4 不 随 滚 动 条 移 动 的 背 景 .1435.1.5 背 景 色 渐 变 .1445.1.6 漫 天 飞 雪 之 Flash 篇 .1475.1.7 漫 天 飞 雪 之 JavaScript 篇 .1503目 录5.2 背景控制 1535.2.1 鼠 标 控 制 背 景 色 .1535.2.2 调

16、色 板 控 制 背 景 色 .1565.2.3 改 变 背 景 图 片 .1595.3 页面更替特效 1605.3.1 进 入 和 离 开 网 页 时 的 特 效 .160第 6 章 标 题 状 态 栏 特 效 .1636.1 标题栏特效 1646.1.1 标 题 栏 显 示 日 期 .1646.1.2 标 题 栏 文 字 移 动 变 换 着 出 现 .1666.1.3 标 题 栏 跳 动 文 字 .1686.2 状态栏特效 1696.2.1 状 态 栏 里 的 打 字 效 果 .1696.2.2 状 态 栏 中 的 文 字 从 右 “飞 ”出 .1716.2.3 虚 拟 硬 盘 格 式 化

17、.173第 7 章 导 航 菜 单 特 效 .1777.1 单层导航菜单 1787.1.1 下 拉 导 航 栏 .1787.1.2 左 键 弹 出 式 菜 单 .1797.1.3 下 拉 式 菜 单 .1817.1.4 淡 入 淡 出 的 下 拉 式 菜 单 .1837.1.5 带 描 述 的 链 接 菜 单 .1877.1.6 漂 浮 式 的 导 航 菜 单 .1897.1.7 动 态 滚 动 导 航 菜 单 .1917.1.8 Fireworks 菜单 1947.2 多层导航菜单 1977.2.1 下 拉 式 多 层 菜 单 .1977.2.2 树 形 菜 单 .2057.2.3 Flas

18、h 多层菜单 .210第 8 章 窗 口 特 效 .2158.1 弹出窗口 2168.1.1 定 时 弹 出 窗 口 .2168.1.2 弹 出 窗 口 展 开 .2188.1.3 弹 出 窗 口 汇 聚 .2204网页特效精彩实例制作8.1.4 幻 灯 片 式 弹 出 窗 口 .2228.2 弹出信息框 2258.2.1 警 告 信 息 框 页 面 冻 结 .2258.2.2 弹 出 输 入 信 息 框 来 访 者 问 候 .2278.2.3 测 试 心 算 能 力 .2288.3 浏览器特效 2318.3.1 浏 览 器 从 天 而 降 .2318.3.2 自 动 滚 屏 .2338.3.

19、3 网 页 载 入 进 度 条 .234第 9 章 按 钮 特 效 .2379.1 表单控件按钮 2389.1.1 改 变 按 钮 样 式 .2389.1.2 跳 舞 按 钮 .2419.1.3 死 机 按 钮 .2439.1.4 控 制 浏 览 器 的 按 钮 .2459.2 其他按钮 2489.2.1 Fireworks 按钮之动态按钮篇 进入三大门户网站 2489.2.2 Fireworks 按 钮 之 触 发 按 钮 篇 美 眉 大 比 拼 2519.2.3 Flash 按钮之动态按钮篇 .2549.2.4 Flash 按钮之触发按钮篇 .258第 10 章 表 单 功 能 特 效 .

20、26110.1 文本框特效 26210.1.1 文 本 框 控 制 .26210.1.2 文 字 坠 落 .26410.2 表单综合运用 26710.2.1 电 子 信 箱 入 口 .26710.2.2 搜 索 引 擎 入 口 .27110.2.3 查 询 主 要 城 市 天 气 情 况 .27410.2.4 利 用 网 页 发 送 ICQ 信息 27610.2.5 科 学 计 算 器 .27810.2.6 制 作 统 计 直 方 图 .28110.3 密码保护页面 28810.3.1 文 件 名 密 码 保 护 页 面 .28810.3.2 自 定 义 密 码 保 护 .2915目 录第 1

21、1 章 在 线 测 试 与 游 戏 .29311.1 在线测试 29411.1.1 心 理 测 试 .29411.1.2 在 线 考 试 .29811.2 在线游戏 30211.2.1 找 相 同 图 片 .30211.2.2 猜 数 字 .30811.2.3 扑克 21 点游戏 .31211.2.4 推 箱 子 .31811.2.5 射 击 游 戏 .330第 12 章 Cookie 特效 .33712.1 Cookie 基础 33812.1.1 Cookie 简介 .33812.1.2 简 单 使 用 举 例 .33812.2 Cookie 应用举例 34012.2.1 登 录 页 面 次

22、 数 显 示 .34012.2.2 记 录 来 客 的 姓 名 及 来 访 次 数 和 时 间 34312.2.3 弹 出 窗 口 只 出 现 一 次 .34712.2.4 自 动 显 示 网 页 更 新 时 间 .348第 13 章 多 媒 体 特 效 .35313.1 音频特效 35413.1.1 在 网 页 中 加 入 音 频 文 件 .35413.1.2 音 乐 选 择 播 放 .35713.1.3 按 照 日 期 播 放 背 景 音 乐 .35913.2 Shockwave 和 Flash 特效 36213.2.1 制 作 和 加 入 Flash 文件 .36213.2.2 制 作

23、和 加 入 Shockwave 文件 .36613.3 视频特效 37013.3.1 加 入 和 控 制 视 频 文 件 的 几 种 方 法 37013.3.2 加 入 和 控 制 AVI 文件 .37213.3.3 加 入 和 控 制 Realplayer 文件 37613.3.4 加 入 和 控 制 QuickTime 文件 382s第 1 章 文字特效文字逐个闪烁彩虹文字 阴影文字 立体文字 图形变形为文字 走马灯文字 文字上下运动 文字逐渐显示 2网页特效精彩实例制作 1.1 变色文字1.1.1 文字逐个闪烁效 果 一 行 蓝 色 的 文 字 ， 逐 个 地 变 成 红 色 ， 闪 烁

24、 的 文 字 制 造 出 一 种 类 似 霓 虹 灯 的 效 果 ， 如 图1-1 所示。图 1-1 文字逐个闪烁原 理 这是一个用 JavaScript 制 作的文字特效 。 使用 JavaScript 中 String 对象的 charAt()方法选 定一个字符串中的某一个文字，然后改变这个文字的颜色。脚本程序首先判断浏览器的类型。 对于 IE 和 Netscape 两种浏 览器要使用不同的操作对 象和函数，比如 IE 中图层的标志是 div， Netscape 中图层的标志是 layer。 在 这 个 程 序 里 我 们按照 navigator.appName 的值来判别浏览器的类型：

25、值为 “Netscape”， 就 是 Netscape 浏览 器，值为“Micro soft Internet Explorer”，就是 IE 浏览器。后面的例子里我们还会提到一些 其他判别浏览器类型的方法。然后定义一个函数： changeCharColor()。 这个函数把变量 text 中的内容写到网页的图层 中， 通过 charAt()函数设置 某一个文字为红色， 其余 文字为蓝色。 写入变量时调用了 JavaScript 的对象 document 的方法 write。 write 方法是 JavaScript 中一 个 很重要而且常用的方法， 以后 还有很多例子要用到它。最后通过调用

26、JavaScript 函数 “setInterval(“changeCharColor()“, speed);”， 每 隔设定的间 隔时间执行一次函数 changeCharColor()， 其中间隔 时间由 speed 设定， 以毫秒为单位， 比如 speed 是 100 就表示每隔 0.1 秒。重新将变量 text 中的内容写到网页中，同时改变显示特定 颜色的文字，这样就得到了文字逐个闪烁的效果。3第 1 章 文字特效源 代 码 文字逐个闪烁 “);/如果是 IE 浏览器else document.write(“);function changeCharColor() if (navigat

27、or.appName = “Netscape“) document.a.document.write(“); for (var j = 0; j “ + Text.charAt(i) + “);else 4网页特效精彩实例制作 document.a.document.write(text.charAt(j);document.a.document.write(); document.a.document.close();if (navigator.appName = “Microsoft Internet Explorer“) str = “; for (var j = 0; j “ + te

28、xt.charAt(i) + “;else str += text.charAt(j);str += “; a.innerHTML = str;/改变 i，确定下一个颜色变化的文字是哪几个字 (i = text.length) ? i=0 : i+;/每经过由 speed 确定的时间后调用一次 changeCharColor()函数 setInterval(“changeCharColor()“, speed);/ End 1.1.2 彩虹文字之 CSS 滤镜篇效 果 文 字 的 背 景 是 彩 虹 色 的 ， 而 且 背 景 相 对 于 文 字 运 动 ， 很 引 人 注 意 并 且 具 有

29、 很 酷 的 效 果 ， 如图 1-2 所示。5第 1 章 文字特效图 1-2 用 CSS 滤镜做的彩虹文字原 理 这个特效使用了一个 CSS 样式表中的滤镜蒙版滤镜。 使用蒙版滤镜的 HTML 元素 相当于一个图层，我们称之为蒙版层。蒙版层遮住后面的 HTML 元 素 ， 只 在 蒙 版 层 上 不 透 明的部分露出后面的 HTML 元素。在这个例子里，主要用到了 3 个 图 层 ： mask、 back 和 move。 mask 层用了白色的蒙版 滤镜， 在其中写有文字 “五彩缤纷的文字” 。 move 层是一 个 彩色的背景， 被蒙版层 mask 蒙 住 它 后 ， 蒙 版 层 的 文

30、字 部 分 就 露 出 后 面 背 景 的 颜 色 ， 形 成 了 彩 色 的 文 字 。 用 JavaScript 函数 来移动图层 move， 这 样 文 字 的 背 景 就 在 运 动 了 。为了保证在 move 层 移 动 的 过 程 中 ， 文 字 后 面 始 终 有 彩 色 背 景 ， 就 需 要 把 move 层 的 宽 度 设 成 大 于 文 字 宽 度 的 一 个 值 ， 但 是 这 时 直 接 在 浏 览 器 中 预 览 网 页 ， 会 看 到 随 着 图 层 move 的 移 动 ， 在 蒙 版 以 外 的 背 景 就 露 出 来 了 。 解 决 这 个 问 题 有 两

31、种 办 法 ： 可 以 把 蒙 版 图 层 做 得 足够大， 以便蒙住 move 层在运动过程中可能到达的任何一个位置。 也可以像这个例子做的 那样，把 move 层 放 到 一 个 背 景 层 back 中，设定 back 层的 clip 属性，只显示与 mask 层 重 合的那部分。这个例子中的 JavaScript 函数比较简单，自定义函数 init() 初 始 化 移 动 的 背 景 元 素 。 自 定义函数 go()使 文 字 背 景 移 动 。 用 按 钮 的 onclick 事件触发函数 go()。源 代 码 彩虹文字 五彩缤纷的文字 7第 1 章 文字特效1.1.3 彩虹文字之

32、 Flash 篇效 果 这个特效与上一小节用 CSS 滤镜做的彩虹文字类似，文字的彩虹色背景是移动的，不 过这个效果是用 Flash 做的，如图 1-3 所示。图 1-3 用 Flash 做的彩虹文字步 骤 1 打开 Flash， 选 择 菜 单 “File”的 “New”命 令 ， 建 立 一 个 新 的 文 件 。2 选 择 菜 单 “Modify”的 “Movie”命 令 。 出 现 “Movie Properties”对 话 框 ， 如 图 1-4所示，更改 Movie 的尺寸，设置宽度为 300 像素，高度为 100 像素。图 1-4 更改 movie 属性3 单击时间线面板左下角的

33、 按钮， 添加一个新图层。 把新图层和原有的图层分别命 名为 mask 和 move， 如 图 1-5 所示。图 1-5 添加图层后的时间线面板4 右键单击图层 mask， 在弹出菜单中选择 “Mask”命令。 这时 mask 图层成为蒙版图 层，两个图层都被锁定，单击锁状图标解除锁定状态。8网页特效精彩实例制作 5 点击 Tools 面 板中的按钮 ， 在 mask 图层中写入文字 “彩虹文字” ， 选择 “Window” “Panels” “Character”菜 单 命 令 ， 弹 出 Character 面板，设置文字的大小和字体。 6 单击 Tools 面板中的按钮 ，在 move

34、图层中画一个矩形。7 选 择 “Window” “Panels” “Fill”菜 单 命 令 ， 弹 出 “Fill”面 板 ， 如 图 1-6 所示，设置为线性渐变填充（Line ar Gradient） ，并 且设置渐变的颜色从左到右依次为红、绿、 蓝。点击 Tools 面板中的油漆桶按钮，填充刚才画的矩形。图 1-6 设置渐变色8 复制这个矩形，选择“Modify”“Transform”“ Flip Horizontal”菜单命令， 水 平 翻 转 这 个 矩 形 ， 将 两 个 矩 形 对 齐 ， 选 择 菜 单 “Modify”下 的 “Group”命 令 合 并 成 一 个 组。

35、再对这个矩形做一次同样的操作， 如图 1-7 所示 。 这时就已经做好了两个图层的第一帧。图 1-7 完成两个图层的第一帧9 在第 30 帧 处 右 键 单 击 时 间 线 ， 在 弹 出 的 菜 单 中 选 择 “Insert Key Frame”命 令 ， 分 别为两个图层添加一个关键帧。10选中第二个图层的第 30 帧，移动背景矩形，使“彩虹文字”4 个字后面的背景与 第一帧时相同，这样就可以保证动画的连续性。11 在第二个图层的第 1 到 第 30 帧之间 点击右键， 在弹出的菜单中选择 “Creat Motion Tween”命 令 ， 生 成 动 画 。12锁定两个图层，按【Ent

36、er】键，预览动画，如图 1-8 所示。9第 1 章 文字特效图 1-8 完成的动画13选择“File”菜单下的“Export Movie”命令输出 SWF 格式的动画文件。14 打 开 Dreamweaver， 点 击 Object 面板中的 按钮，插入刚才输出的动画文件。1.1.4 文字连续变色效 果 当 鼠 标 停 留 在 上 面 的 一 行 文 字 “文 字 连 续 变 色 ”的 上 方 时 ， 整 个 网 页 的 文 字 颜 色 都 会 连续变化，如图 1-9 所示。图 1-9 文字连续变色原 理 这是一个简单的文字特效， 我们用它来做 VBScript 特效的 例 子。 JavaS

37、cript 和 VBScript 都 是 常 用 的 脚 本 语 言 ， 但 是 VBScript 脚 本 只 能 用 于 IE 浏 览 器 ， 从 前 面 的 例 子 可 以 看 出 JavaScript 的 脚 本 可 以 针 对 不 同 浏 览 器 编 程 ， 从 而 保 证 了 其 兼 容 性 。 如 果 网 页 中 使 用 VBScript ， 在 脚 本 标 记 中 要 注 明 language=“VBScript“。 而 对 JavaScript 可 以 忽 略 这 种 说 明 。这个例子中自定义了一个函数 hello， 注 意 VBScript 定 义 函 数 与 JavaSc

38、ript 的区别。这 个函数只有一个语句，就是设定对象 document 的前景色 fgColor 为一个随机数。10网页特效精彩实例制作 源 代 码 文字连续变色 文 字 连 续 变 色 把鼠标移动到上面的文字的上方，整个网页的文字的颜色都会变化。sub hellodocument.fgColor=int(256*256*256*rnd) end sub1.2 文本形状特效1.2.1 阴影文字和投影文字效 果 不需要使用图像，我们就可以得到阴影文字和投影文字的效果，如图 1-10 所示。图 1-10 阴影文字和投影文字11第 1 章 文字特效原 理 在这个例子里我们使用两个 CSS 的滤镜来

39、分别制作阴影文字和投影文字的效果。 一 个 是 CSS 的 投 影 滤 镜 ， 用 来 产 生 投 影 的 效 果 。 它 的 语 法 是 ： filter:DropShadow(color=color, offx=offx, offy=offy,positive=positive)。 其 中 参 数 color 指 投 射 阴 影 的 颜 色 ， offx 和 offy 分别是 x 方 向 和 y 方 向 阴 影 的 偏 移 量 ， 参 数 positive 指 投 影 方 式 ， 是 一 个 布 尔 值 （ 0 或 1） ，0 表示给透明像素生成阴影，1 表示只给不透明像素生成阴影。投 影

40、 滤 镜 的 工 作 原 理 是 建 立 一 个 和 原 来 相 同 的 对 象 ， 为 这 个 新 的 对 象 设 置 一 个 偏 移 量 ， 再加上较深的颜色。另一个滤镜是 CSS 的阴影滤镜， 可以用来在指定的方向建立物体的阴影 。 它的语法是： filter:Shadow (color=color,direction=direction)。 其中参 数 color 指阴 影颜色， 可以设置为 RGB 颜 色 或 者 颜 色 关 键 字 。 direction 用 来 设 置 阴 影 的 方 向 ， 可 以 取 0至 360中 任 何 值 ， 但 是 实际的效果中只能用 8 种方向：上（

41、0） 、右 上（45 ） 、 右（90 ） 、 右下（13 5） 、 下（18 0） 、 左下 （22 5） 、 左 （2 70） 、 左上 （ 315） 。 当 设置的属性值不是上面给出的 8个值中的 1 个时，取与之最相近的值对应的方向，阴影方向的默认值是向左的 270。 阴 影 滤 镜 和 投 影 滤 镜 的 区 别 在 于 阴 影 滤 镜 的 着 色 方 式 不 像 投 影 那 样 采 用 固 定 的 颜 色 ，它 的 着 色 类 似 于 光 晕 ， 有 一 种 渐 变 的 效 果 。 在 这 个 例 子 中 两 段 文 字 分 别 使 用 了 阴 影 和 投 影 的效果，与图 1-1

42、0 对照，可以看出两种效果的区别。这 个 例 子 中 应 用 CSS 的 滤 镜 的 方 法 是 首 先 设 定 两 个 CSS 的 类 ： .myShadow 和.my_DropShadow。注意类的名字要用一个点开始，在两个类中分别设置阴影滤镜和投影 滤镜，然后把相应的类应用到文字中去。可以在 Dreamweaver 中加入新的 CSS 类。步骤如下。1. 打开 Dreamweaver 4.0， 选 择 “Text” “CSS Styles” “New Style”菜 单 命 令 ， 这时弹出新建类的窗口。如图 1-11 所示。图 1-11 新建 CSS 类的窗口2. 填入新类的名字，其他

43、设置如图 1-11 所 示 ， 采 用 默 认 的 设 置 。 单 击 “OK”按 钮 ，弹出类的定义窗口，如图 1-12 所示。12网页特效精彩实例制作 图 1-12 CSS 类的定义窗口3. 在左边 Category 栏中选择 Extensions， 在 “Filter”下 拉 菜 单 中 选 择 “DropShadow” 命 令 ， 将 问 号 改 成 相 应 的 参 数 值 ， 然 后 单 击 “OK”按 钮 就 加 入 了 一 个 新 的 类 。源 代 码 阴影文字 阴 影 的 效 果 投 影 的 效 果 1213第 1 章 文字特效1.2.2 立体文字效 果 这是一个用 Flash

44、 做的特 效， 晶莹剔透的立体文字让人不由得联想起冰雪的世界， 效果 如图 1-13 所示。图 1-13 用 Flash 做的立体字步 骤 1 打开 Flash， 选 择 菜 单 “File”上 的 “New”命 令 ， 建 立 一 个 新 的 文 件 。2 选 择 菜 单 “Modify”下 的 “Movie”命 令 ， 出 现 Movie Properties 对 话 框 ， 参 见 图1-4，更改动画的尺寸，设置宽度为 300 像素，高度为 100 像素。3 点击 Tools 面板中的按钮 ，输入文字“snow ”， 选择“W indow”“Panels ” “Character”菜单命

45、令，弹出 Character 面板，设 置文字字体为 “Arial Black”，文字颜 色为 深蓝色。4 选 择 “Modify” “Transform” “Scale”菜 单 命 令 ， 放 大 文 字 ， 使 其 大 小 接 近 整个动画的背景。5 复制文字，粘贴到原有文字稍微偏上偏左的位置，在 Character 面 板 中 设 置 文 字 颜 色为浅蓝色。这时已经有了立体字的效果，如图 1-14 所示。6 选 中 两 个 图 形 ， 选 择 菜 单 “Modify”中 的 “Break Apart”命令，打散图形。7 点击 Tools 面 板 中 的 按 钮 ， 点 击 图 1-15

46、 中点 2 处 ， 拖 动 到 点 1 处 ， 类 似 地 操 作 使 图 像 中 其 他 的 上 层 图 形 移 动 到 下 层 图 形 相 交 处 。 并 且 在 文 字 阴 影 的 拐 角 处 添 加 线 条 。 最 后 图像如图 1-16 所示。图 1-14 简单的立体字效果 图 1-15 拖动的位置14网页特效精彩实例制作 8 选 择 “Window” “Panels” “Fill”菜 单 命 令 ， 弹 出 Fill 面板，选择线性渐变 填充， 并且设置渐变的颜色从左到右依次为白、 淡蓝、 白。 点 击 Tools 面板 中的油漆桶按钮， 填充文字的阴影部分，效果如图 1-17 所

47、示。图 1-16 进一步增加立体效果 图 1-17 完成后的立体字9 选择菜单 “File”中的 “Publish Setting”命令， 弹出如图 1-18 所示 的面板。 选择 JPEG Image 选项。这时面板上会出现 JPEG 标签页，如图 1-19 所 示 。 在 该 标 签 页 中 设 定 和 JPEG 图像相关的参数，然后点击“Publish”按钮，输出图像 snow.jpg。图 1-18 输出图像面板图 1-19 设置输出 JPG 格式图像15第 1 章 文字特效然后在 Dreamweaver 中打开一个新网页，插入图像。就得到了最后的结果。1.2.3 波浪文字效 果 一行文

48、字，像波浪一样翻滚，如图 1-20 所示。图 1-20 波浪文字原 理 用几个自定义的 JavaScript 函数控制 一段文字中每个字的大小， 使文字的大小按照正弦 函数的规律来变化，就形成了波动的效果。首先分别解释一下用到的几个 JavaScript 函数。 数学对象 Math 中的两个函数：abs ()绝对值函数， sin ()正 弦 函 数 。 字符串对象 String 中的两个函数：parseInt () 用于将字符串开头的整数部分分解出来。substring (i ,j) 用于返回源字符串的一个子串。其中 i、j 是 两 个 正 整 数 ， 分 别 标 识 子 串 的起始和终止位置

49、。脚本程序的主体是 3 个自定义的函数。函数 nextSize(i,textLength)用 来 设 定 下 一 个 字 的 大 小 ， 其 中 参 数 i 确 定 要 设 定 大 小 的 文 字处于正弦波中的位置，参数 textLength 是制作波浪效果的文本的长度。函数 sizeCycle(text,dis)依次设定输出字符串中每个字符的大小， 并输出这个字符串到图 层 theDiv 中 。 其 中 text 是要输出的字符串，dis 是 一 个 可 变 的 偏 移 量 ， dis 的改变可使文字 大小也改变，从而出现波动的效果。函数 doWave(n) 每隔 50 毫秒执行一次，每次运行调用一次函数 sizeCycle。在 body 标 记 中 写 入 “onload=doWave(0);”就 是 在 网 页 下 载 时 调 用 函 数 doWave。16网页特效精彩实例制