Javascript 为什么 <marquee> 已被弃用，最好的选择是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31951282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is <marquee> deprecated and what is the best alternative?
提问by areim
Longer time I'm curious about HTML tag <marquee>.
更长的时间我对 HTML tag 感到好奇<marquee>。
You can find in MDN specification:
您可以在MDN 规范中找到：
ObsoleteThis feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
过时此功能已过时。尽管它可能在某些浏览器中仍然有效，但不鼓励使用它，因为它可以随时被删除。尽量避免使用它。
or on W3C wiki:
或在W3C wiki 上：
No, really. don't use it.
不完全是。不要使用它。
I searched several articles and found some mention about CSS relevant replacement. CSS attributes like:
我搜索了几篇文章，发现了一些关于 CSS 相关替换的内容。CSS 属性如：
marquee-play-count
marquee-direction
marquee-speed
but it seems, they don't work. They were a part of specification in year 2008, but they were excluded in year 2014
但似乎，它们不起作用。它们是2008 年规范的一部分，但在2014 年被排除在外。
One way, proposed by W3 Consortium, is using CSS3 animations, but it seems for me much more complicated than easy-to-maintain <marquee>.
W3 Consortium 提出的一种方法是使用CSS3 动画，但对我来说，它似乎比易于维护复杂得多<marquee>。
There are also plenty of JS alternatives, with lots of source code that you can add to your projects and make them larger.
还有很多JS 替代品，其中包含大量源代码，您可以将它们添加到您的项目中并使它们变得更大。
I'm always reading things as: "don't ever use marquee", "is obsolete". And I don't get why.
我总是把事情读成：“永远不要使用选框”，“已经过时了”。我不明白为什么。
So, can anybody explain to me, whyis marquee deprecated, why is so "dangerous" using it and what is the easiest substitution?
那么，任何人都可以向我解释，为什么不推荐使用选框，为什么使用它如此“危险”以及最简单的替换是什么？
I found an example, it looks nice. When you use all prefixes needed for good browser support, you have around 20-25 lines of CSS, with 2 values hardcoded (start and stop indent), depending on text length. This solution is not so flexible, and you can't create bottom-to-top effect with this.
我找到了一个例子，看起来不错。当您使用良好的浏览器支持所需的所有前缀时，您将拥有大约 20-25 行 CSS，其中包含 2 个硬编码值（开始和停止缩进），具体取决于文本长度。这个解决方案不是那么灵活，你不能用它创建自下而上的效果。
回答by Thomas Bormans
I don't think you should move the content but that doesn't answer your question... Take a look at the CSS:
我认为您不应该移动内容，但这并不能回答您的问题...看看 CSS：
.marquee {
width: 450px;
line-height: 50px;
background-color: red;
color: white;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
Here is the codepen.
这是代码笔。
Edit:
编辑：
Here is the bottom to top codepen.
这是从下到上的codepen。
回答by Artanis
You just have to define class and attached looping animation once in CSS and use it afterwards everywhere you need. But, as many people said - it's a bit annoying practice, and there is reasone, why this tag is becoming obsolete.
你只需要在 CSS 中定义一次类和附加的循环动画，然后在你需要的任何地方使用它。但是，正如许多人所说 - 这是一个有点烦人的做法，并且有理由，为什么这个标签变得过时了。
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 15s linear infinite;
-webkit-animation: example1 15s linear infinite;
animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
<div class="example1">
<h3>Scrolling text... </h3>
</div>回答by Rob
<marquee>was never part of any HTML specification and what you link to is a CSS spec so it's hard to deprecate something that was never included. HTML is about structure of a document, not its presentation. So having a self-animated element as part of HTML does not abide by those goals. Animation is in CSS.
<marquee>从来都不是任何 HTML 规范的一部分，并且您链接到的是 CSS 规范，因此很难弃用从未包含的内容。HTML 是关于文档的结构，而不是它的表示。因此，将自动画元素作为 HTML 的一部分并不符合这些目标。动画是在 CSS 中。
回答by Wolfgang Blessen
As stated before: the easiest substitution is CSS animation
如前所述：最简单的替换是 CSS 动画
To all the critics of the marquee:
致所有批评者：
It is a very useful tool for UI, I am using it just on hover, to display more information in a limited space.
这是一个非常有用的 UI 工具，我只是在悬停时使用它，以在有限的空间中显示更多信息。
The example for the mp3-player is excellent, even my car-radio is using the effect to show the current song.
mp3 播放器的示例非常好，甚至我的汽车收音机也在使用该效果来显示当前歌曲。
So nothing wrong about that, my opinion ...
所以没有错，我的意见......
回答by Bryan Zeng
I know this was answered a couple years ago, but I found this when inspecting this. When I inspected, I found this.
我知道这是几年前回答的，但我在检查时发现了 这个。当我检查时，我发现了这个。
@keyframes scroll {
from {
transform: translate(0,0)
}
to {
transform: translate(-300px,0)
}
}
.resultMarquee {
animation: scroll 7s linear 0s infinite;
position: absolute
}
回答by Ale
I have created a jQuery script that will replace the old marqueetag with standard div. The code will also parse the marqueeattributes like direction, scrolldelayand scrollamount. Actually the code can skip the jQuery part but I felt too lazy to do so, and the vanilla JS part is actually a solution that I modified from @Stano answere from here
我创建了一个 jQuery 脚本，它将marquee用标准div. 该代码还将解析marquee诸如direction,scrolldelay和 之类的属性scrollamount。实际上代码可以跳过jQuery部分，但我觉得太懒了，而vanilla JS部分实际上是我从@Stano answere from here修改的解决方案
Here is the code:
这是代码：
jQuery(function ($) {
if ($('marquee').length == 0) {
return;
}
$('marquee').each(function () {
let direction = $(this).attr('direction');
let scrollamount = $(this).attr('scrollamount');
let scrolldelay = $(this).attr('scrolldelay');
let newMarquee = $('<div class="new-marquee"></div>');
$(newMarquee).html($(this).html());
$(newMarquee).attr('direction',direction);
$(newMarquee).attr('scrollamount',scrollamount);
$(newMarquee).attr('scrolldelay',scrolldelay);
$(newMarquee).css('white-space', 'nowrap');
let wrapper = $('<div style="overflow:hidden"></div>').append(newMarquee);
$(this).replaceWith(wrapper);
});
function start_marquee() {
let marqueeElements = document.getElementsByClassName('new-marquee');
let marqueLen = marqueeElements.length
for (let k = 0; k < marqueLen; k++) {
let space = ' ';
let marqueeEl = marqueeElements[k];
let direction = marqueeEl.getAttribute('direction');
let scrolldelay = marqueeEl.getAttribute('scrolldelay') * 100;
let scrollamount = marqueeEl.getAttribute('scrollamount');
let marqueeText = marqueeEl.innerHTML;
marqueeEl.innerHTML = marqueeText + space;
marqueeEl.style.position = 'absolute';
let width = (marqueeEl.clientWidth + 1);
let i = (direction == 'rigth') ? width : 0;
let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;
marqueeEl.style.position = '';
marqueeEl.innerHTML = marqueeText + space + marqueeText + space;
let x = setInterval( function () {
if ( direction.toLowerCase() == 'left') {
i = i < width ? i + step : 1;
marqueeEl.style.marginLeft = -i + 'px';
} else {
i = i > -width ? i - step : width;
marqueeEl.style.marginLeft = -i + 'px';
}
}, scrolldelay);
}
}
start_marquee ();
});
And here is a working codepen
这是一个有效的代码笔
