常见的文字滚动效果实现

在早期的网页中，大家是否见过一种网页中的广告，它会在网页里来回移动。又或是像今天这种互联网十分发达的时代，网页中经常会出现在固定的位置来回滚动播报的新闻标题，网站公告。

这些，都是文字滚动效果在实际网页设计中的应用。那么我们学习网页设计，自然是不可跳过这一环节，今天这个小节的知识点，老师将带领同学们来了解一下，文字滚动实现的原理，如何去控制文字滚动，以及在 Dreamweaver CC 2018 中实践文字滚动效果。

这一节的知识点，不算很难，但应用性还是不低的，希望同学们学习后，能够应用在自己设计的网页中去。下面就请跟随老师的介绍来开始今天的学习吧！

1. 网页中文字滚动实现原理

1.1文字滚动的意义

网页中使用文字滚动，相对于早期 WEB1.0 时代的网页，是具有里程碑的意义的。首先，HTML 作为网页内容的载体，在早期大部分都由静态元素构成。这就造成了网页的主次，或者叫关键信息概念十分模糊，难于查找。

后来，网页中出现了文字滚动这种在效果上接近动态的设计。人们在首次加载网页的时候能够被这部分会动的的信息所吸引，大大提高了网站中网页的用户友好度。

也为后来的一些用户交互提供了思维上的参考。其次，初期的网站，在寻找配套商业模式的时候也遇到了变现困难的烦恼。如何利用广告变现成为了大众开发者最开始的烦恼。后来他们想到了用滚动效果来引起用户的注意，从而实现了广告的价值，也对开发者收获经济价值起到了一定的作用。

因此，就像今天学习文字滚动一样，同学们以后如果深入学习 js 等语言的时候可能还会学习到更多的诸如图片滚动，轮播等动态效果，万丈高楼平地起，今天的知识点对以后的学习将是一个借鉴和参考。

1.2 HTML 文字滚动标签

如果在含有文字滚动的网页中查看过源码的同学们应该见过这个标签。 marquee 标签。它是一个标准的 HTML 标签。也是成对出现的。很多人将其文字滚动效果称为跑马灯或走马灯。HTML 很早就加入了跑马灯效果，以至于在早期的纯静态网页中就可以看到相关的实践与应用。

从语法角度讲，在一组成对出现的 HTML marquee 标签中间的文字，就会被设置为滚动效果。

说起滚动，这里就要引导同学们思考一个问题：滚动可能的属性有哪些？

在这里统一回答一下，首先，滚动肯定不是只能一个方向滚动的，W3C 标准组织根据我们人类的视觉习惯，习惯上将滚动方向分为两个方向，也就是我们都能想到的左右滚动方向，和上下滚动方向。

其次，滚动如果可以随便滚动，那么是不是会覆盖到其他元素，导致文字重叠，反而降低了网站的实际观感？当然不能这样设置，因此，W3C 标准组织在设计之初，就为 marquee 这个 HTML 元素提供了 width 和 height 属性，让元素只能在我们规定的一块区域里滚动。

然后，既然是动，物理好的同学或许会考虑到：文字动的速度怎么办？ Good Job！真是个好问题！

这个问题不用我们操心，因为 W3C 组织在制定标准的时候，还提供了一个设置滚动速度的 scrollamount 属性。

那么这些具体如何控制我们在本小节下一个知识点中会介绍，此处只作思维发散性的引导。

2. 如何控制文字滚动

跟随上一个知识点中讲述的内容，我们具体来看一下 marquee 如何使用。

首先是文字滚动的方向如何控制？

这里面我们只需要控制 marquee 标签的 direction 属性。这个属性提供四个值 up down left right，分别对应文字滚动效果：向上，向下，向左，向右滚动。是不是很简单？

然后滚动速度怎么去控制？

这里面我们只需控制 marquee 标签的 scrollamount 属性，控制的规律是数值越小越慢，反之则越来越快。那么这里老师要传授给大家一个实际工作的经验，那就是一般将这个属性的值设置为 5-10 时比较适合我们肉眼观看的。

3. 在 Dreamweaver CC 2018 中为文字设置滚动效果

首先，我们还是老规矩，先建立一个空白的 HTML 文档。由于 Dreamweaver CC 2018 具有很好的代码提示功能。因此我们只需要在 body 中自己想要插入走马灯的位置插入一对 marquee 标签即可，比如下面的图片中，设置了一个典型的 marquee 走马灯文字滚动效果。

我们可以在一组对比图中明显的看到，由于我们设置了 width 和 height 属性，走马灯文字滚动效果的显示范围被限制在了相关区域内。

并且我们设置了文字的滚动方向时从左向右。更多属性，同学们可以查阅 W3C 的官方标准文档。

4. 小结

在本节知识点中，我们主要向大家讲解了网页设计中文字滚动效果的设计初衷和实践意义。这一部分需要大家能够理解为什么要使用文字滚动效果，以及文字滚动效果在今天的实践意义。

然后我们向大家介绍了 HTML 中与文字滚动效果有关的原生标签 marquee 标签，以及它的一些重要的属性。在这里大家要理解文字滚动中滚动两个字的含义，和其背后可能蕴藏的原理。

这为我们能够在今后的实际网页设计中能灵活巧妙地选择 marquee 标签的属性设置具有非常关键的作用。希望大家能够体会每一个关键属性，并且可以在课下自己多多尝试，体会诸如速度，方向等属性设置的效果。

本节知识点的难点是：理解文字滚动效果在网页设计中的重要性，理解 marquee 标签滚动属性的含义，并能够灵活设置和选用。

本节知识点的重点是：在 Dreamweaver CC 2018 中设置走马灯文字滚动效果。