jquery - 现在处理字幕的正确方法?

标签 jquery html css marquee

<分区>

由于 marquee HTML 标记已过时,我想知道,现在执行此操作的正确方法是什么?我见过许多实现相同任务的 jQueryJavascript 片段,但我希望可以这么说,在选框方面有一个新的“标准”。

我见过类似这样的 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/

关于jquery - 现在处理字幕的正确方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31631504/

相关文章:

css - 如何将webkit应用到每张图片

javascript - Keydown/keyup 事件未检测到在 Chrome 中的输入文本字段上按下的 Escape 键

javascript - 如何使用 Greasemonkey 阻止删除或停止 jquery 中的匿名函数

jquery - 不发送默认选择的选项值

javascript - 总计一个表格 - HTML/JavaScript

javascript - 使用javascript隐藏和显示下拉菜单

jquery - OSX 惯性滚动导致 mousewheel.js 通过最轻微的滚动运动注册多个鼠标滚轮事件

javascript - Angular 1.5+ 中组件的 DOM 操作

html - 我不想要的顶部边距

html - 为较小的屏幕分辨率加载不同的内联图像