Skip to main content

HTML5和CSS3时代的MARQUEE

Anonim

那些已经写了很长时间HTML的人可能会记住这个元素。这是一个特定于浏览器的元素,它创建了一个在屏幕上滚动文本的横幅。此元素从未添加到HTML规范中,并且对它的支持因浏览器而异。人们对这个元素的使用经常有很强烈的意见 - 无论是积极的还是消极的。但无论你喜欢还是讨厌它,它确实有助于使溢出框边界的内容可见。

除了强烈的个人观点之外,浏览器从未完全实现的部分原因是它被视为视觉效果,因此,它不应由定义结构的HTML定义。相反,视觉或演示效果应由CSS管理。 CSS3添加了marquee模块来控制浏览器如何将字幕效果添加到元素中。

新的CSS3属性

CSS3添加了五个新属性来帮助控制内容在选取框中的显示方式: 溢流式, 帐篷式, 字幕播放计数, 选取框方向选取框速度.

溢流式溢流式 property(我在CSS Overflow文章中也讨论过)定义了溢出内容框的内容的首选样式。如果将值设置为 选取框线 要么 选取框块 您的内容将向左/向右滑动(选取框线)或上/下(选取框块).

帐篷式此属性定义内容将如何移入视图(和输出)。

选项是 滚动, 滑动备用。滚动开始时内容完全脱离屏幕,然后它在可见区域移动,直到它再次完全关闭屏幕。幻灯片从内容完全关闭屏幕开始,然后移动直到内容完全移动到屏幕上,并且没有更多内容可以在屏幕上滑动。

最后,交替将内容从一侧反弹到另一侧,来回滑动。

字幕播放计数使用的缺点之一 MARQUEE 元素是大帐篷永远不会停止。但随着风格属性 字幕播放计数 您可以设置选取框以打开和关闭特定次数的内容。

选取框方向您还可以选择内容应在屏幕上滚动的方向。价值 向前相反 是基于文本的方向性时的 溢流式选取框线 当上升或下降时 溢流式选取框块.

选框方向细节

溢流式语言方向向前相反
选取框线LTR剩下
RTL剩下
选取框块 向上

选取框速度此属性确定内容在屏幕上滚动的速度。价值观是 , 正常,和 快速。实际速度取决于内容和显示它的浏览器,但值必须是 比…慢 正常 这比慢 快速.

浏览器支持Marquee属性

您可能需要使用供应商前缀来使CSS marquee元素起作用。它们如下:

CSS3供应商前缀
overflow-x:marquee-line;overflow-x:-webkit-marquee;
帐篷式-webkit-帐篷式
字幕播放计数-webkit-选取框重复
marquee-direction:forward | reverse;-webkit-marquee-direction:前锋|后退;
选取框速度-webkit-选取框速
没有等价物-webkit-选取框增量

最后一个属性允许您定义当内容在选取框中的屏幕上滚动时步数应该大小。

为了使您的选框工作,您应该首先放置供应商前缀值,然后使用CSS3规范值。例如,这里是一个选框的CSS,它在200x50的框内从左向右滚动文本五次。

{ 宽度:200px;身高:50px;白色空间:nowrap; 溢出:隐藏; 溢出 - X:-webkit-选取框; -webkit-marquee-direction:前锋; -webkit-marquee-style:scroll; -webkit-marquee-speed:正常; -webkit-marquee-increment:small; -webkit-marquee-repetition:5; overflow-x:marquee-line; 选框方向:前进; 字幕式:滚动; 选框速度:正常; 选框计数:5;}