【问题标题】:Proper way to handle marquees now? [duplicate]现在处理选框的正确方法? [复制]
【发布时间】:2015-07-26 06:16:07
【问题描述】:

既然marquee HTML 标签已经过时,我想知道,现在这样做的正确方法是什么?我见过很多 jQueryJavascript sn-ps 完成了相同的任务,但我希望在字幕中有一个新的“标准”,可以这么说。

我见过类似的 CSS sn-ps:

overflow-style: marquee-line;
marquee-style: line;

但它们似乎不适用于所有浏览器(或在某些情况下)。我知道它被视为“90 年代”主题创意,但仍有一些目的需要它,而且我网站上的收入代码确实需要滚动以最大化每个可用像素的内容。

【问题讨论】:

标签: jquery html css marquee


【解决方案1】:

没有“标准”方式,那就是像我们之前使用的不需要样式的 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/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-08-31
    • 1970-01-01
    • 2019-03-04
    • 1970-01-01
    • 2013-06-25
    • 2019-07-17
    相关资源
    最近更新 更多