# 滚动代码

- Link: https://yjyj.net/css/3981.html
- Published: 2006-07-28T17:44:56+08:00
- Author: 小 虾

⚡ 生猛大蝦编辑部 · 30 秒核心看点

 * 滚动字幕核心是 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)如何给滚动字幕加超链接？这跟平时的超链接是完全一样的。只要在文字外面
加上[和](https://yjyj.net/css/***)就可以了。如下效果，代码是[中央电视台](http://www.cctv.com)，
点击中央电视台就可以进入了：

 HTML代码

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

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

 HTML代码

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

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

 HTML代码

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

d)多行文本向上滚动。代码如：
 ·早晨好啊！·空气好清新啊·今天过得好吗？

·[中央电视台](http://www.cctv.com)

 效果如：

 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 事件控制。文中还给出交替滚动、颜色样式控制等扩展写法，
适合按需组合。

📚 【[前端杂烩](https://yjyj.net/category/css)】专栏延伸阅读与热门精选（[全站文章归档](https://yjyj.net/archive)）：

 * [表格特效代码全集中](https://yjyj.net/css/3882.html)
 * [连续滚动代码](https://yjyj.net/css/3881.html)
 * [MYSQL初学者使用](https://yjyj.net/css/3983.html)
 * [神奇的css table隔行换色](https://yjyj.net/css/4305.html)
 * 热门必读[俩月了, DMIT 终于补货了!](https://yjyj.net/share/7795.html)
 * 热门必读[跨境电商 AI Prompts](https://yjyj.net/ad/7723.html)