由于 marquee
HTML 标记已过时,我想知道,现在执行此操作的正确方法是什么?我见过许多实现相同任务的 jQuery
和 Javascript
片段,但我希望可以这么说,在选框方面有一个新的“标准”。
我见过类似这样的 CSS 片段:
overflow-style: marquee-line;
marquee-style: line;
但它们似乎并不适用于所有浏览器(或某些情况下的任何浏览器)。我知道它被视为“90 年代”主题的想法,但仍有一些目的需要它,我网站上的收入收报机确实需要滚动以最大化每个可用像素的内容。
没有“标准”方法,就像我们之前使用的那样不需要样式的 HTML 标记。但归根结底,这样更好。我们可以控制我们打算显示的每个对象的所有方面,而不是总是依赖默认值。这对于整体用户体验来说更好,并且不完全在 StackOverflow 的范围内,但在大多数情况下,一般的跑马灯已经超出了良好用户体验的范围。
如果你想深入研究它,你应该注意一些跨浏览器的差异,你可能需要调整宽度和缩进以满足你的需要,但这应该让你继续:
<div class="marquee">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
.marquee {
width: 300px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 50s linear infinite;
}
@keyframes marquee {
0% { text-indent: 27.5em }
100% { text-indent: -105em }
}
http://jsfiddle.net/7k5g3hco/