在没有MARQUEE的情况下在HTML5和CSS3中创建可滚动内容

那些长期写HTML的人可能会记住这个元素。 这是一个浏览器特定的元素,它在屏幕上创建了滚动文本的横幅。 这个元素从来没有被添加到HTML规范中,并且它在各种浏览器中的支持各不相同。 人们经常对使用这种元素有非常强烈的意见 - 无论是正面的还是负面的。 但是,无论您是喜欢还是讨厌它,它的确有助于让内容溢出盒边界。

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

新的CSS3属性

CSS3增加了五个新的属性来帮助控制你的内容在字幕中的显示方式:溢出风格,字幕风格,字幕播放计数,字幕方向和字幕速度。

溢流式
overflow-style属性(我在文章CSS溢出中也讨论过)定义了溢出内容框的内容的首选样式。 如果将值设置为选取框或选取框,则您的内容将滑入和滑出左侧/右侧(选框行)或上/下(选取框块)。

帐篷式
这个属性定义了内容将如何进入视图(和视图)。

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

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

字幕播放计数
使用MARQUEE元素的一个缺点是选取框从不停止。 但是,通过样式属性选取框,您可以设置选取框以将内容打开和关闭特定次数。

选取框方向
您也可以选择内容在屏幕上滚动的方向。 正向和反向值基于文本的方向性,当溢出风格为矩形框时,以及当溢出风格为矩形框时向上或向下。

选取方向详情

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

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

浏览器支持选取属性

您可能需要使用供应商前缀才能使CSS选取框元素正常工作。 他们如下:

CSS3 供应商前缀
overflow-x:marquee-line; overflow-x:-webkit-marquee;
帐篷式 -webkit-帐篷式
字幕播放计数 -webkit-选取框重复
选框方向:正向|反向; -webkit-marquee-direction:forwards | backwards;
选取框速度 -webkit-选取框速
没有相同的 -webkit-选取框增量

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

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

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