为什么是 已弃用，最佳选择是什么？

问题描述 投票：28回答：6

更长的时间我对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个值是硬编码的（开始和停止缩进），具体取决于文本长度。此解决方案不够灵活，您无法使用此方法创建自下而上的效果。

javascript html css css3 marquee
6个回答
35
投票

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

6
投票

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

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

对于大帐篷的所有评论家：

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

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

所以没有错，我的意见......

4
投票

<marquee>从来不是任何HTML规范的一部分，你链接到的是一个CSS规范，因此很难弃用从未包含的东西。 HTML是关于文档的结构，而不是它的表示。因此，将自动元素作为HTML的一部分并不遵守这些目标。动画是在CSS中。

1
投票

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

这是代码：

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

1
投票

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

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

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

.resultMarquee {
    animation: scroll 7s linear 0s infinite;
    position: absolute
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.