为什么 <marquee> 不推荐使用，最好的选择是什么？

Question

我对 HTML 标签 <marquee> 的好奇已经很久了。

您可以在MDN specification:

中找到

已过时 此功能已过时。尽管它在某些浏览器中可能仍然有效，但不鼓励使用它，因为它可能随时被删除。尽量避免使用它。

或W3C wiki：

不，真的。不要使用它。

我搜索了几篇文章，发现一些关于 CSS 相关替换的内容。 CSS 属性如：

marquee-play-count
marquee-direction
marquee-speed

但看起来，它们不起作用。它们在 2008 年是规范的一部分，但在 2014 年被排除在外

W3 Consortium 提出的一种方法是使用 CSS3 animations，但对我来说，这似乎比易于维护的 <marquee> 复杂得多。

还有很多JS alternatives，有很多源代码，您可以将它们添加到您的项目中并使它们变得更大。

我一直在阅读以下内容：“永远不要使用选取框”、“已过时”。我不明白为什么。

那么，谁能向我解释一下，为什么不推荐使用选框，为什么使用它如此“危险”以及最简单的替代方法是什么？

我找到了example，看起来不错。当您使用良好的浏览器支持所需的所有前缀时，您有大约 20-25 行 CSS，其中 2 个值是硬编码的（开始和停止缩进），具体取决于文本长度。这个解决方案不是很灵活，你不能用它来创建从下到上的效果。

Answer 1

我认为您不应该移动内容，但这并不能回答您的问题...看看 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); }
}

这里是codepen。

编辑：

这里是自下而上codepen。

Answer 2

<marquee> 从来都不是任何 HTML 规范的一部分，并且您链接到的是 CSS 规范，因此很难弃用从未包含的内容。 HTML 是关于文档的结构，而不是它的呈现。因此，将自动画元素作为 HTML 的一部分并不符合这些目标。动画在 CSS 中。

Answer 3

您只需在 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>

Answer 4

如前所述：最简单的替换是 CSS 动画

致所有对选框的批评：

它是一个非常有用的 UI 工具， 我只是在悬停时使用它， 在有限的空间内显示更多信息。

mp3 播放器的示例非常好， 甚至我的车载收音机也在使用该效果来显示当前歌曲。

所以我认为这没什么错......

Answer 5

我知道这是几年前回答的，但我在检查时发现了这个 this。当我检查时，我发现了这个。

@keyframes scroll {
    from {
        transform: translate(0,0)
    }

    to {
       transform: translate(-300px,0)
    }
}

.resultMarquee {
    animation: scroll 7s linear 0s infinite;
    position: absolute
}

Answer 6

我创建了一个 jQuery 脚本，它将用标准的 div 替换旧的 marquee 标签。该代码还将解析marquee 属性，例如direction、scrolldelay 和scrollamount。实际上代码可以跳过 jQuery 部分但我懒得这样做，而 vanilla JS 部分实际上是我从@Stano answere from here修改的解决方案

代码如下：

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 = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
            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 ();
});

这是一个有效的codepen