每天学习一点点,成功增加一大步

HTML 标签 marquee 实现字幕滚动

前端 zhanghui 718℃

前段时间有个客户有一个需求,想在手机版的页面上实现像LED滚动字幕,这让我想以前刚入门计算机时上网页设计课,那个时候学习网页设计我们使用的是 dreamweaver,老师在课堂上演示过这种效果的实现,我自己也练习过,但由于实际的工作中很少应用到这种效果,所以渐渐的忘记了,所以只好上网络上寻找了下,终于找到以前学习过的 marquee 标签,为以后查找方法所以就做了下笔记,也随便作下复习吧。
marquee 的基本语法:

<marquee> … </marquee>

下面解释一下各参数的含义:
align:是设定活动字幕的位置,除了居左、居中、居右三种位置外,又增加靠上(top)和靠下(bottom)两种位置。
Bgcolor:用于设定活动字幕的背景颜色,可以使用英文的单词也可以是十六进制数的。
Direction:用于设定活动字幕的滚动方向是向左(left)、向右(right)、向上(up)、向下(down)。
Behavior:用于设定滚动的方式,主要由三种方式:
behavior=”scroll”表示由一端滚动到另一端;
behavior=”slide”:表示由一端快速滑动到另一端,且不再重复;
behavior=”alternate”表示在两端之间来回滚动。
Height:用于设定滚动字幕的高度。
Width:则设定滚动字幕的宽度。
Hspace和vspace:分别用于设定滚动字幕的左右边框和上下边框的宽度。
Scrollamount:用于设定活动字幕的滚动距离。数值越小,滚动的速度就越快。
scrolldelay:用于设定滚动两次之间的延迟时间,数值越小,间隔就越小。
Loop:用于设定滚动的次数,当loop=-1表示一直滚动下去,直到页面更新。其中默认情况是向左滚动无限次,字幕高度是文本高度;滚动范围:水平滚动的宽度是当前位置的宽度;垂直滚动的高度是当前位置的高度。
onmouseover: 用于设定鼠标移动到marquee块上执行的操作。
onmouseout: 用于设定鼠标从marquee块上移出后执行的操作。

参数一:实现简单的滚动,这只是使用了marquee的默认用法。

	<marquee> 啦啦啦,真的会动耶!</marquee>

啦啦啦,真的会动耶!

参数二:direction – 方向。这个参数的取值有四个:left(左)、right(右)、up(上)、down(下)。

	<marquee direction="up">向上移动</marquee>

向上移动

参数三:behavior – 移动方式。值:scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。

<marquee direction="left" behavior="alternate">哈哈,我来回走!</marquee>

哈哈,我来回走!

	<marquee direction="left" behavior="slide">累!我只走一次!</marquee>

累!我只走一次!

参数四:loop – 循环。若未指定则循环不止(infinite),其值取数值。

	<marquee loop="3">我只走三次哦</marquee>

我只走三次哦

参数五:scrollamount – 移动速度。值取正整数。数值越大,速度越快。

	<marquee scrollamount="25">看,我走多快!</marquee>

看,我走多快!

参数六:scrolldelay – 延时。数值。例:

	<marquee scrolldelay="1000">我走一走,停一停</marquee>

我走一走,停一停

参数七:bgcolor – 底色。

	<marquee bgcolor="pink">看到了吧?有底色!</marquee>

看到了吧?有底色!

参数八:width和height – 就是移动的宽度与高度了。

	<marquee width="200" height="200" bgcolor="pink" direction="down">这个面积不够我移动!</marquee>

这个面积不够我移动!

其他参数:
空白(Margins)<hspace=数值 vspace=数值>
对齐方式(Align) <align=top/ middle/bottom>

(2018-06-21更新)

随着时间的推移 marquee 标签(这位老同志)逐渐被遗弃了,不过还有个家伙和它有个同名的插件存在,那就是 jquery Marquee 插件,它的效果请看:https://codepen.io/aamirafridi/pen/qgutw

转载请注明:隨習筆記 » HTML 标签 marquee 实现字幕滚动