利用JavaScript制作无缝的连续滚动广告效果

利 用 Ｊｖ Ｓ ｒ ｔ 作无 缝 的连 续滚 动广 告 效 果 ａａ ｃｉ 制 ｐ
刘 洪 涛
（ 州 师 专 ，辽 宁 锦 州 １ １ ０ ） 锦 ２ ０ ０
摘 要 ：讲 解 网 页 中常 见 的广 告 特 效— — 无 缝 的连 续 滚 动广 告效 果 的制 作 思 路 ，实 现 多行 文 字从 下 向上 垂 直连 续不 断地 滚 动 ，并 且 当 鼠标 移 到 滚 动 文字 上 就 停 止滚 动 ，否 则 继 续滚 动 ． 关 键 词 ：层 ；Ｃ Ｓ样 式 ；Ｓ ｔ ｔ ｖ ｌ ｌ ｒ ｔ ｖ ｌ ｓ ｅｌ ｅ ａ；Ｃｅ Ｉ ｅ ａ ｎ ｒ ａｎ ｒ 中图 分类 号 ：Ｔ ３ １ １ Ｐ１． 文献 标 识 码 ：Ａ 文 章 编 号 ：１０ ０８—５ ８ （０ ０ ０ —０ ４ —０ ６ ８ ２ １ ）２ ０ ４ ２ 互 联 网作 为 一 个 新 兴 的 媒 介 ， 日益成 为众 多 商 家 和 企业 宣 传 自身 的 重 要 平 台 ． 而铺 天 盖 地 的广 告 自然 也 成 为 网 站盈 利 的重 要组 成 部 分 ，因 此 如何 制作 精 美 的广 告特 效 ，从 而 吸 引人 们 的注 意 ，是 网 页设 计 者 必 须 关 注 的问 题 ． ＪｖＳｒ ｔ 一 种 基 于 事 件 触 发 的脚 本 语 言 ， 因 此 在 设 计 网页 时 ，可 以将 事 件 与 ＪｖＳｒ ｔ 言 二 者 有 机 地 结 合 起 来 ， ａａｅｉ 是 ｐ ａａ ｃｉ 语 ｐ
第 ｌ 卷 第２ 期 ２ １ 年 ６月 ２ ０ ０
辽 宁师 专 学 报
Ｊ ｕ ｎ ｌ ｆＬｉｏ ｉｇ Ｔ ａ ｈ ｒ ｌ ｇ ｏ ｒ ａ ａ ｎ ｎ ｅ ｃ ｅ ｓＣｏ ｌ ｅ ｏ ｅ
Ｖｏ ．２ Ｊ １ Ｎｏ．２ 相 关 理 论
２． Ｍａｑ ｅ １ ｒｕ ｅ标 记 代 码
使 用 Ｍａｑｅ 标 记 不仅 可 以 移 动 文字 ，还 可 以移 动 图 片 、表 格 ，甚 至 其 他 页 面 元 素 ．滚 动 标 记 Ｍａｑ ｅ ｒｕｅ ｒｕｅ的语 法 格 式 如
下 ： ＜ Ｍ ａｑ ｅ ｅ ａ ｉｒ ｌ ｒ ａｅ ｉｅｔ ｎ＝ ｐ ｅｏｌｅ ｙ＝ ２ ０ ｅｏｌｍｏ ｎ ＝２ ０ ｗｉｔ ｒ ｕｅｂ ｈ ｖｏ ＝ ａｔ ｎ ｔ＂ｄｒｃｉ ｕ ＂ｓｒｌ ｌ ０ ｓｒｌ ｅ ｏ ｄ ａ ａ ｕ ｔ ０ ｄｈ＝５ ０ ｈ ｉｈ ＝ １ ０ ０ ｅｇ ｔ ８
制 作 出生 动 美 观 的 页 面 效 果 ． Ｄ ｖ 技 术 是 目前 制 作 网页 过 程 中使 用 频 率 较 高 的一 种 技 术 ，通 过 设 置 层 可 以实 现 页 面 的灵 活 布 局 ． 同时 借 助 Ｃ Ｓ样 ｉ层 Ｓ
式 表 ，还可 以起 到 很 好 的 页 面美 化效 果 ．层 技 术 不 仅 可 以用 于 页面 设 计 ，配合 使 用 ＪｖＳｒ ｔ 本 ，还 可 以实 现对 特 定 页 面 ａａ ｅｉ 脚 ｐ 元 素 的控 制 ，如 使 用 层 实 现信 息 提示 、 弹 出 隐藏 层 、不 同 页 面位 置 的导 航 切 换 等 ，从 而 实 现 不 同 的 页 面 特 效 ，增 加 页 面 浏 览 量 ，带 来 可 观 的 经 济 效 益 ． 层 信息 提 示 是 当 用 户 移 动 鼠标 指 针 到 页 面 中某 一 对 象 上 时 ，显 示 该 对 象 相 关 说 明 内容 的效 果 ．实 现 方 式 是 预 先 将 对 象 的 相关 信息 内容 放 置 在 一 个层 中 ，通 过样 式 的显 示 控 制 属 性 Ｄ ｓｌ ，将 层 显 示 状 态 默 认 设 为 隐藏 ． 当 鼠 标 指 针 移 动 到 该 对 ｉ ａ ｐｙ 象 区 域 上方 时 ，利 用 事 件触 发改 变 Ｄｉ ｌ ｓ ａ 性 为 显示 ． ｐ ｙ属 要 制作 文 字 滚 动 类 特 效 ，首 先 应 想 到 的 是 使 用 Ｍａ ｕｅ 记 来 实 现 文 字 在 水 平 或 垂 直 方 向 上 的 滚 动 ，由 于 使 用 ｒ ｅ标 ｑ Ｍａｑｅ 标 记 有 一 个 缺 陷 ，就是 在 文 字 滚动 的 过 程 中 ，总会 有 一 段 时 间 出现 无 滚 动 文 字 的 情 况 ， 因 此 为 了 弥 补 这 个 缺 陷 ， ｒｕｅ 使 用 ＪｖＳｒ ｔ 本 代码 和 Ｄｖ 来 实 现 无 缝 的连 续 滚 动 广 告 ． ａａｃｉ 脚 ｐ ｉ层
１ 案 例分 析
不 管是 水 平方 向滚 动文 字 还 是垂 直 方 向滚 动文 字 ，在 某个 周 期 性 的 间 隔 时 间 内 ，页 面 中会 出现 空 白区 域 ，要 想 在 垂 直方 向上 的 滚动 文字 实 现无 缝 连续 滚 动 ，即 在屏 幕 的指 定 区 域 ，嵌 入 一段 多行 文 字 ，文 字 由 下 向 上 滚 动 ，当滚 动 到 最 末 一 行 ，首 行 文字 立 即 紧跟 着 最末 一行 出来 ，与 最 末一 行 同 时在 一个 屏 幕 内滚 动 ，单 用 ＜Ｍａ ｕｅ ｒ ｅ＞标 记 来 实 现 是 不 行 的 ．这 里 需要 使 用 ｑ Ｄｖ 及其 相关 属 性 （ ： ｎｒ Ｔ 、ｆｅ ｏ 、 ｒｌ ｏ 、ｆ ｅ ｅ ｈ）ＪｖＳｒ ｔ ｉ层 如 ｉ ｅＨ ＭＬ ｏｆ ｔ ｐ ｓ ｏＴｐ ｏｓｔ ｉ ｔ， ａｃｉ 中内置 的方 法 ｓ ｌｔ ｖｌ）通 过 使 用 ｓ ｌｔ ｖｌ） ｎ ｓＴ ｃ ｌ ｆ Ｈｇ ａ ｐ ｅ ｎｅ ａ ， ｔ ｒ （ ｅ ｎｅ ａ ｔ ｒ （ 方 法 来 实现 多行 文 字连 续 不 断地 滚 动 ．通过 调 用 ｃ ａｌｔ ｖｌ（ ｌ ｒｎｅ ａ ）方 法 ，清 除 定 时器 ，达 到停 止 文 字 滚动 的 效果 ． ｅ ｒ