多媒体是一个网站的必备元素,使用它可以丰富网站效果,体现设计者的个性,吸引用户的注意,突出重点。通常多媒体元素包括声音和动画两部分。
设置动态文字
网页的多媒体元素一般包括动态文字、动态图像、声音以及动画等,其中最简单的就是添加一些滚动文字。
1 设置滚动文字——marquee
使用marquee 标记可以将文字设置为动态滚动的效果。
语法:<marquee>滚动文字</marquee>
说明:只要在标记之间添加要进行滚动的文字即可,而且可以在标记之间设置这些文字的字体、颜色等。
实例代码:
<html>
<head>
<title>设置滚动文字</title>
</head>
<body>
<marquee>
<font FONT-SIZE: 9pt;">隶书" color="#CC0000 " size=4>你好,欢迎光临梦幻小屋!这里有欢乐的歌声,这里有美好
的景色</font>
</marquee>
</body>
</html>
运行这段代码,可以看到设置为红色隶书的文字从浏览器的右方缓缓向左滚动。
2 文字滚动方向——direction
默认情况下文字只能是从右向左滚动,而在实际应用中常常需要不同滚动方向的文字,这可以通过direction 参数来设置。
语法:<marquee direction="滚动方向">滚动文字</marquee>
说明:该语法中的滚动方向可以包含4 个取值,分别为up、down、left 和right,它们分别表示文字向上、向下、向左和向右滚动,其中向左滚动left 的效果与默认效果相同,而向上滚动的文字则常常出现在网站的公告栏中。
实例代码:
<html>
<head>
<title>设置滚动文字</title>
</head>
<body>
<marquee direction="up">
<font color="#3300FF" FONT-SIZE: 9pt;">楷体_GB2312">
你好,欢迎您的光临<br>
这里是梦想小屋<br>
让我们与您分享您的点点快乐<br>
让我们与您分担您的片片忧伤<br>
</font>
</marquee>
<marquee direction="down">
<font color="#FF0000" FONT-SIZE: 9pt;">楷体_GB2312">
你好,欢迎您的光临<br>
这里是梦想小屋<br>
让我们与您分享您的点点快乐<br>
让我们与您分担您的片片忧伤<br>
</font>
</marquee>
</body>
</html>
运行这段代码,可以看到文字不同的滚动效果,两段文字的感觉就像是从中间被拉扯开一样。
如果将文字方向相反设置,也就是上面一段文字的 direction 设置为down,下面一段设置为up,运行结果就似乎是两组文字融合到一起一样。
3 设置文字的滚动方式——behavior
除了将文字设置为单方向的滚动外,还可以为文字设置滚动方式,如往复运动等。这一功能可以通过添加behavior 属性来实现。
语法:<marquee behavior="滚动方式 ">滚动文字</marquee>
说明:在这里,滚动方式behavior 的取值可以设置为下表中所示的某个值,不同取值的滚动效果也不相同。
表 滚动方式的设置
behavior的取值 滚动的效果
scroll 循环滚动,默认效果
slide 只滚动一次就停止
alternate 来回交替进行滚动
实例代码:
<html>
<head>
<title>设置滚动文字</title>
</head>
<body>
<marquee behavior="scroll">你好,欢迎您的光临</marquee>
<br><br>
<marquee behavior ="slide">让我们与您分享您的点点快乐</marquee>
<br><br>
<marquee behavior ="alternate">让我们与您分担您的片片忧伤</marquee>
</body>
</html>
运行这段代码,可以看到效果。其中第一行文字不停地循环,一圈一圈地滚动;而第二行文字则在第一次到达浏览器边缘时就停止了滚动;最后一行文字则在滚动到浏览器左边缘后开始反方向运动。
4 循环设置——loop
设置滚动文字后,在默认情况下会不断地循环下去,如果希望文字滚动几次停止,可以使用loop参数来进行设置。
语法:<marquee loop="循环次数">滚动文字</marquee>
实例代码:
<html>
<head>
<title>设置滚动文字</title>
</head>
<body>
<marquee direction="up" loop="3">
<font color="#3300FF" FONT-SIZE: 9pt;">楷体_GB2312">
你好,欢迎您的光临<br>
这里是梦想小屋<br>
让我们与您分享您的点点快乐<br>
让我们与您分担您的片片忧伤<br>
</font>
</marquee>
</body>
</html>
运行这段代码,会发现当文字滚动3 个循环之后,滚动文字将不再出现。但是如果设置滚动方式为交替滚动,那么在滚动3 个循环之后,文字将停留在窗口中。
5 滚动速度——scrollamount
在设置滚动文字时,有时候可能希望它快一些,也有时候希望它慢一些。这一功能可以使用scrollamount 参数来实现。
语法:<marquee scrollamount=滚动速度></marquee>
说明:在该语法中,滚动文字的速度实际上是设置滚动文字每次移动的长度,以像素为单位。
实例代码:
<html>
<head>
<title>设置滚动文字</title>
</head>
<body>
<marquee scrollamount=3>看看我走得速度怎么样!</marquee><br><br>
<marquee scrollamount=10>看看我走得速度怎么样!</marquee><br><br>
<marquee scrollamount=50>看看我走得速度怎么样!</marquee>
</body>
</html>
运行这段代码,可以看到3 行文字同时开始滚动,但是速度是不一样的,设置的scrollamount 越大,速度也就越快。
6 滚动延迟——scrolldelay
scrolldelay 参数可以设置滚动文字滚动的时间间隔。
语法:<marquee scrolldelay=时间间隔></marquee>
说明:scrolldelay 的时间间隔单位是毫秒,也就是千分之一秒。这一时间间隔的设置为滚动两步之间的时间间隔,如果设置的时间比较长,会产生走走停停的效果。
如果与滚动速度 scrollamount 参数结合使用,效果更明显,下面以实例说明。
实例代码:
<html>
<head>
<title>设置滚动文字</title>
</head>
<body>
<marquee scrollamount=100 scrolldelay =10>看我不停脚步得走!</marquee><br><br>
<marquee scrollamount=100 scrolldelay =100>看我走走歇歇!</marquee><br><br>
<marquee scrollamount=100 scrolldelay =500>我要走一步停一停</marquee>
</body>
</html>
运行这段代码,其中第一行文字设置的延迟小,因此走起来比较平滑;最后一行设置的延迟比较大,看上去就像是走一步歇一会儿的感觉。
7 滚动文字的背景设置——bgcolor
在网页中,为了突出某部分内容,常常使用不同背景色来显示。滚动文字也可以单独设置背景色。
语法:<marquee bgcolor="颜色代码">滚动文字</marquee>
说明:文字背景颜色设置为16 位颜色码。
实例代码:
<html>
<head>
<title>设置滚动文字</title>
</head>
<body>
<marquee behavior ="alternate" bgcolor="#FFFF66">
这里是梦幻小屋,欢迎光临
</marquee>
<br><br>
<marquee direction="up" bgcolor="#99CCFF">
你好,欢迎您的光临<br>
这里是梦想小屋<br>
让我们与您分享您的点点快乐<br>
让我们与您分担您的片片忧伤<br>
</marquee>
</body>
</html>
运行这段代码,看到在滚动文字后面设置了淡蓝色的背景。
8 滚动背景面积——width、height
如果不设置滚动背景的面积,那么默认情况下,水平滚动的文字背景与文字同高、与浏览器窗口同宽,使用width 和height 参数可以调整其水平和垂直的范围。
语法:<marquee width=背景宽度 height=背景高度>滚动文字</maruquee>
说明:此处设置宽度和高度的单位均为像素。
实例代码:
<html>
<head>
<title>设置滚动文字</title>
</head>
<body>
<marquee behavior =" alternate" bgcolor="#99CCFF">
这里是梦幻小屋,欢迎光临
</marquee><br><br>
<marquee behavior="alternate"bgcolor="#99CCFF" width=500
height=50>
这里是梦幻小屋,欢迎光临
</marquee>
</body>
</html>
运行这段代码,可以看到两段滚动文字的背景高度和宽度的变化。
9 设置空白空间——hspace、vspace
默认情况下,滚动文字周围的文字或图像是与滚动背景紧密连接的,使用参数hspace 和vspace 可以设置它们之间的空白空间。
语法:<marquee hspace=水平范围 vspace=垂直范围>滚动文字</marquee>
说明:该语法中水平和垂直范围的单位均为像素。
实例代码:
<html>
<head>
<title>设置滚动文字</title>
</head>
<body>
不设置空白空间的效果:
<marquee behavior ="alternate" bgcolor="#9999FF ">
这里是梦幻小屋,欢迎光临
</marquee>
到这里,留下你的忧伤,带走我的快乐!
<br>
<hr color="#FF0000">
<br>
设置水平为 70 像素、垂直为50 像素的空白空间:
<marquee behavior ="alternate" bgcolor="#9999FF " hspace=70 vspace=50>
这里是梦幻小屋,欢迎光临
</marquee>
我的梦想与你同在!
</body>
</html>
运行这段代码,可以看到设置空白空间的效果。