---
title: "滚动代码"
url: "https://yjyj.net/css/3981.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2006-07-28T17:44:56+08:00"
updated_at: "2006-07-28T17:44:56+08:00"
categories: "前端杂烩"
tags: "JavaScript交互, 前端开发实战, 网页视觉设计"
summary: "本文系统讲解 HTML 滚动字幕的做法与常见坑：从速度、方向、区域大小到交替、停止、超链接、多行向上滚动，再到颜色控制，一次搞懂 marquee 的实战用法与局限，适合想快速做出可用滚动效果的前端入门者。"
source: "生猛大蝦 (https://yjyj.net)"
---

# 滚动代码

> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/css/3981.html) · 作者：小 虾 · 发布时间：2006-07-28

## 30 秒核心看点 (TL;DR)

- 滚动字幕核心是 marquee 标签，速度、方向、区域大小都能直接调。
- 多行向上滚动、鼠标悬停停止、超链接和交替效果，文中都有现成写法。
- FrontPage 处理后可能只剩单行滚动，实操上建议直接改源代码，必要时用 document.write。

滚动字幕会让很多人感到兴奋，特别是第一次使用滚动字幕时，会爱不释手。滚动字幕我也做得不少了，对它也不会兴奋了，所以现在也用得不多了。有不少朋友常问到这是怎么做的，现在做一个详细的专题，让你更全面地了解一下。
滚动字幕在FrontPage的组件里有，但是FrontPage这个软件只能支持单行文字，一出现多行文字它就无能为力了，而且它只能支持一行滚动！(如果出现只能滚动一行的情况，解决办法是把这段代码嵌入到javascript的document.write里面，请看下面例d的详细说明)Dreamweaver也只能用编写HTML代码的方法。所以强烈建议用记事本打开网页源代码来编辑。
1.建立第一个滚动字幕。代码：
我喜欢网页设计 HTML代码

我喜欢网页设计
  
 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

2.各参数详解：
a)scrollAmount。它表示速度，值越大速度越快。如果没有它，默认为6，建议设为1～3比较好。
b)width和height，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。
c)direction。表示滚动的方向，默认为从右向左：←←←。可选的值有right、down、up。滚动方向分别为：right表示→→→，up表示↑，down表示↓。
d)scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。
e)behavior。用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动)
3.实例：
a)如何给滚动字幕加超链接？这跟平时的超链接是完全一样的。只要在文字外面加上和就可以了。如下效果，代码是中央电视台，点击中央电视台就可以进入了： HTML代码

中央电视台
  
 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

b)如何制作当鼠标停留在文字上，文字停止滚动？
代码如：
文字内容
效果如： HTML代码

文字内容
  
 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

c)交替效果。代码如：
文字内容
效果如： HTML代码

文字内容
  
 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

d)多行文本向上滚动。代码如：
·早晨好啊！
·空气好清新啊
·今天过得好吗？·中央电视台
效果如： HTML代码

·早晨好啊！
·空气好清新啊
·今天过得好吗？·中央电视台
  
 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

·注意：如果你的网页经过了FrontPage编辑，保存之后，只能滚动一行，这时候你发现你原来的代码顺序已经变了，My god！解决的办法是，找出原来的代码，把它嵌入到javascript的document.write中即可，上述代码写为：

e)改变滚动字幕的颜色？可以用样式表来控制。如下效果，代码是我喜欢网页设计！。
 HTML代码

我喜欢网页设计！
  
 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

## 延伸问答与排错指南 (FAQ)

### 滚动字幕怎么控制速度和方向？
速度主要看 scrollAmount 和 scrollDelay：scrollAmount 越大越快，scrollDelay 越大越慢。方向可用 direction 设置，常见值有 right、up、down；默认是从右向左滚动。实际使用时先小幅调整，避免文字跑太快看不清。

### 为什么多行滚动保存后只剩一行？
文中提到，经过 FrontPage 编辑后，代码顺序可能被改动，导致多行滚动失效，只能滚动一行。解决办法是把原始代码嵌入 javascript 的 document.write 中，再保存测试，尽量直接编辑网页源代码。

### 滚动字幕能加链接和鼠标悬停停止吗？
可以。加链接时，直接把文字包在超链接标签里即可；鼠标停留停止滚动，则在 marquee 上加 onmouseover 与 onmouseout 事件控制。文中还给出交替滚动、颜色样式控制等扩展写法，适合按需组合。

---
更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)