HTML5培训学习设置滚动文字效果

2017-04-18 13:47:56

多媒体页面
1、HTML5中设置滚动文字
(1)设置滚动文字和文字滚动方向
语法:<marquee direction="滚动方向">设置滚动文字</marquee>
解释:marquee标签用来设置设置文字滚动,direction属性用于设置滚动的方向。滚动方向属性为up、down、left和right,分别为向上、向下、向左和向右滚动。
实例:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>设置滚动文字</title>
</head>
<body>
<marquee direction="up"><font face="微软雅黑"color="blue"size="5">飞雀教育欢迎您</font></marquee>
</body>
</html>

 

运行代码,可以看到文字从下向上滚动。
 
(2)设置滚动方式属性---behavior
语法:<marquee behavior="滚动方式">滚动文字</marquee>
解释:behavior用来设置文字的滚动方式,共有三种方式如下:

behavior取值 滚动效果
scroll 循环滚动,默认效果
slide 滚动一次停下
alternate 来回滚动
实例:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>设置滚动方式</title>
</head>
<body>
<marquee behavior="scroll">北京飞雀教育</marquee>
<marquee behavior="slide">专业的教师讲课</marquee>
<marquee behavior="alternate">最贴心的服务</marquee>
</body>
</html>


 
运行代码,如图,第一行字不停地循环滚动,第二行字从滚动至最左边停止,第三行文字左右反复滚动。
 
(3)文字滚动速度---scrollamount
语法:<marquee scrollamount="滚动速度"scrolldelay="滚动延迟"></marquee>
解释:文字滚动速度是通过设置文字每次移动长度来实现的,scrollamount值越大,速度越快。单位为像素。Scrolldelay滚动延迟的时间间隔设置为滚动两步之间的时间间隔,单位毫秒。
实例:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>设置滚动速度</title>
</head>
<body>
<marquee scrollamount="100"scrolldelay="500"loop="10">
<font size="4"color="blue">飞雀教育</font>
</marquee>
</body>
</html>



设定滚动速度为100,延迟500,可以看到文字走走停停的效果。
循环滚动属性---loop,用来设置文字滚动的次数,设定一定的数值,文字滚动过后将不再显示。
 
 
 
(4)设置滚动的范围和背景颜色
语法:
<marquee width="滚动宽度"height="滚动高度"bgcolor="背景颜色"></marquee>
解释:默认情况下,水平滚动的文字滚动范围为浏览器窗口宽度和文字高度。使用width和height属性可以调整水平和竖直滚动的范围。Bgcolor用来设置滚动的背景颜色。
实例:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>滚动范围</title>
</head>
<body>
<marquee behavior="alternate"width="200"height="50"bgcolor="aqua">
<font size="4"color="blue">飞雀教育</font>
</marquee>
</body>
</html>



运行代码,如图,文字滚动范围在宽200,高50像素的范围内,背景颜色为aqua。
 
(5)、滚动空间属性---hspace、vspace
语法:<marquee hspace="水平间距"vspace="垂直间距">飞雀教育</marquee>
解释:该语法中,水平间距和垂直间距的单位均为像素。
实例:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>滚动范围</title>
</head>
<body>
设置水平间距50像素,垂直间距30像素
<marquee hspace="50"vspace="30" bgcolor="aqua">飞雀教育</marquee>
Future
</body>
</html>



运行代码如图,滚动文字左右间距为50像素,上下间距为30像素,会根据浏览器窗口大小自动调节。
 
注:在HTML5中,marquee元素由JavaScript编程方式代替。
 

iOS QQ群

HTML5 QQ群

飞雀动态

行业新闻

Copyright © 2015-2016 Future education technology co., LTD All Rights Reserved