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

2017-06-16 13:47:00

多媒体页面
1、HTML5中设置滚动文字
(1)设置滚动文字和文字滚动方向
语法:设置滚动文字
解释:marquee标签用来设置设置文字滚动,direction属性用于设置滚动的方向。滚动方向属性为up、down、left和right,分别为向上、向下、向左和向右滚动。
实例:






飞雀教育欢迎您



 

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

behavior取值 滚动效果
scroll 循环滚动,默认效果
slide 滚动一次停下
alternate 来回滚动
实例:






北京飞雀教育
专业的教师讲课
最贴心的服务




 
运行代码,如图,第一行字不停地循环滚动,第二行字从滚动至最左边停止,第三行文字左右反复滚动。
 
(3)文字滚动速度---scrollamount
语法:
解释:文字滚动速度是通过设置文字每次移动长度来实现的,scrollamount值越大,速度越快。单位为像素。Scrolldelay滚动延迟的时间间隔设置为滚动两步之间的时间间隔,单位毫秒。
实例:







飞雀教育







设定滚动速度为100,延迟500,可以看到文字走走停停的效果。
循环滚动属性---loop,用来设置文字滚动的次数,设定一定的数值,文字滚动过后将不再显示。
 
 
 
(4)设置滚动的范围和背景颜色
语法:

解释:默认情况下,水平滚动的文字滚动范围为浏览器窗口宽度和文字高度。使用width和height属性可以调整水平和竖直滚动的范围。Bgcolor用来设置滚动的背景颜色。
实例:







飞雀教育







运行代码,如图,文字滚动范围在宽200,高50像素的范围内,背景颜色为aqua。
 
(5)、滚动空间属性---hspace、vspace
语法:飞雀教育
解释:该语法中,水平间距和垂直间距的单位均为像素。
实例:






设置水平间距50像素,垂直间距30像素
飞雀教育
Future





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

iOS QQ群

HTML5 QQ群

飞雀动态

行业新闻

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