8.1　设置滚动效果

网页的多媒体元素一般包括动态文字、动态图像、声音以及动画等，其中最简单的就是添加一些滚动效果。

8.1.1　滚动标记marquee

使用marquee标记不仅可以移动文字，也可以移动图片、表格等。

语法：

说明：

在标记之间添加要进行滚动的内容，并可以在标记之间设置文字或图像的属性。

举例：

在代码中加粗部分的代码标记是设置滚动的标记，在浏览器中预览可以看到滚动效果，如图8.1所示。

图8.1　滚动效果

8.1.2　滚动方向direction

默认情况下只能是从右向左滚动，可以通过direction来设置不同的滚动方向。

语法：

说明：

滚动方向包含4个取值，分别为up、down、left和right，它们分别表示向上、向下、向左和向右滚动，其中向左滚动left的效果与默认效果相同。

举例：

在代码中加粗的代码标记是设置文字滚动的方向，在浏览器中预览效果，第一段文字是向下滚动的，第2段文字是向上滚动的，如图8.2所示。

图8.2　滚动文字效果

在制作网页时，滚动文字效果一般用于滚动公告栏或新闻动态等方面，如图8.3所示。

图8.3　滚动公告效果图

8.1.3　滚动方式behavior

除了可以设置滚动方向外，还可以通过behavior属性来设置滚动方式，如循环运动等。

语法：

说明：

滚动方式behavior的取值参见表8-1所示。

表8-1　滚动方式的设置

举例：

在代码中加粗部分的代码标记是设置滚动的方式，在浏览器中预览循环滚动效果，如图8.4所示。

图8.4　循环滚动效果

8.1.4　滚动速度scrollamount

可使用scrollamount设置滚动的快慢。

语法：

说明：

滚动的速度实际上是设置每次滚动时移动的长度，以像素为单位。

举例：

在代码中加粗部分的标记为设置滚动的速度，在浏览器中预览将scrollamount设置为3的效果，如图8.5所示。

图8.5　滚动的速度效果

8.1.5　滚动延迟scrolldelay

可以使用scrolldelay设置滚动的时间间隔。

语法：

说明：

scrolldelay时间间隔的单位是毫秒。如果设置的时间比较长，会产生走走停停的效果。

举例：

在代码中加粗部分的标记为设置滚动的延迟时间，在浏览器中预览上面的一段文字将延迟时间设置为200毫秒的效果、下面的一段设置为400毫秒的效果，如图8.6所示。

图8.6　延迟的效果

8.1.6　滚动循环loop

默认情况下滚动会不断地循环下去，如果希望滚动几次后停止，可以使用loop设置滚动次数。

语法：

举例：

在代码中加粗部分的标记为设置滚动文字的循环次数，在浏览器中预览循环3次的效果，如图8.7所示。

图8.7　设置循环的次数

8.1.7　滚动范围width、height

如果不设置滚动背景的面积，默认情况下，水平滚动的文字背景与文字同高、与浏览器窗口同宽，使用width和height参数可以调整其水平和垂直的范围。

语法：

说明：

此处设置的宽度和高度的单位均为像素。

举例：

在代码中加粗部分的代码标记是设置滚动效果的宽度和高度，在浏览器中预览，可以看到将宽度设置为300像素、高度设置为400像素的效果，如图8.8所示。

图8.8　滚动文字的范围

8.1.8　滚动背景颜色bgcolor

在网页中，为了突出某部分内容，常常使用不同的背景色来显示。可以使用bgcolor设置滚动背景颜色。

语法：

说明：

滚动背景颜色应设置为16进制的颜色。

举例：

在代码中加粗部分的代码标记为设置滚动文字的背景颜色，在浏览器中预览，可以看到滚动文字后面的背景呈橘黄色，如图8.9所示。

图8.9　滚动背景颜色效果

8.1.9　空白空间hspace、vspace

默认情况下，滚动对象周围的文字或图像是与滚动背景紧密连接的，使用hspace和vspace可以设置它们之间的空白空间。

语法：

说明：

该语法中水平范围和垂直范围的单位均为像素。

举例：

在代码中加粗部分的代码标记为设置空白空间，在浏览器中预览，效果如图8.10所示。

图8.10　空白空间效果