logo标签列表

JavaScript跑马灯替代<marquee>标签

javascripthtmlmarquee
13

我对JavaScript一窍不通。这是我的代码：

<script type="text/javascript">
    function beginrefresh(){

        //set the id of the target object
        var marquee = document.getElementById("marquee_text");

        if(marquee.scrollLeft >= marquee.scrollWidth - parseInt(marquee.style.width)) {
            marquee.scrollLeft = 0;
        }

        marquee.scrollLeft += 1;

        // set the delay (ms), bigger delay, slower movement
        setTimeout("beginrefresh()", 10);

    }
</script>

它向左滚动，但我需要它相对无缝地重复。目前它只会跳回到开头。如果不可能以我现在的方式完成，那么有没有更好的方法？

7个回答
16
我对这些或其他任何东西都没有什么好运气，无法实现环绕效果。它们在再次开始之前会等待最后一个元素清除屏幕，有什么想法吗？ - Maslow
2
第一个链接已失效。 - Sp0T
9

简单的JavaScript解决方案：

window.addEventListener('load', function () {
 function go() {
  i = i < width ? i + step : 1;
  m.style.marginLeft = -i + 'px';
 }
 var i = 0,
  step = 3,
  space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
 var m = document.getElementById('marquee');
 var t = m.innerHTML; //text
 m.innerHTML = t + space;
 m.style.position = 'absolute'; // https://dev59.com/0HI95IYBdhLWcg3w_zWs#2057789
 var width = (m.clientWidth + 1);
 m.style.position = '';
 m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space;
 m.addEventListener('mouseenter', function () {
  step = 0;
 }, true);
 m.addEventListener('mouseleave', function () {
  step = 3;
 }, true);
 var x = setInterval(go, 50);
}, true);
#marquee {
   background:#eee;
   overflow:hidden;
   white-space: nowrap;
 }
<div id="marquee">
 1 Hello world! 2 Hello world! <a href="#">3 Hello world!</a>
</div>

JSFiddle

这对于任何内容都非常有效，不仅仅是文本。 - user1282637
1
我知道这个答案已经有一年了，但我仍然希望能得到回复。我该如何修改这个解决方案以实现无缝的垂直滚动而不是水平滚动？ - CaffeinatedMike
这是最好的一个。我最近（9年后）将其作为我的基础使用：https://codepen.io/ciprian/pen/xxmomZR - undefined
2

我最近使用Cycle 2 Jquery插件在HTML中实现了一个跑马灯：

http://jquery.malsup.com/cycle2/demo/non-image.php

请注意，此处保留了HTML标签。

<div class="cycle-slideshow"  data-cycle-fx="scrollHorz" data-cycle-speed="9000" data-cycle-timeout="1"  data-cycle-easing="linear" data-cycle-pause-on-hover="true" data-cycle-slides="> div" >
  <div>  Text 1  </div>
  <div>  Text 2  </div>
</div>
1

HTML5 不支持标签，但是很多浏览器仍然可以“正确”地显示文本，但您的代码将无法验证。如果这不是您关注的问题，那么这可能是一种选择。

CSS3 可以实现跑马灯文本效果，但因为任何知道如何实现该效果的人都认为它是 CSS 中的“坏主意”，所以我在网上找到的信息非常有限。即使 W3 文档也没有为业余爱好者或自学者提供足够详细的实现方法。

PHP 和 Perl 也可以复制此效果。但是，此脚本所需的复杂性非常高，并且会占用比其他选项更多的资源。还有可能脚本在某些浏览器上运行过快，导致效果完全被抵消。

回到 JavaScript - 您的代码（OP）似乎是我找到的最干净、最简单、最有效的代码。我将尝试此方法。对于无缝处理，我将探索一种方法来限制结尾和开始之间的空白，可能会使用 while 循环（或类似方式）并实际运行两个脚本，让一个脚本休息，而另一个脚本正在处理。

也许只需要单个函数更改就可以消除空格。我对JS还不熟悉，脑海里想不起来。- 我知道这不是完整的答案，但有时候想法可以带来结果，即使只是为了别人。

5
我很乐意知道你如何想像PHP可以“复制”客户端的跑马灯效果——考虑到PHP是一种服务器端语言...请告诉我？ - Tom Glenn
1

这个脚本用来替换跑马灯标签

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     
         $('.scrollingtext').bind('marquee', function() {
             var ob = $(this);
             var tw = ob.width();
             var ww = ob.parent().width();
             ob.css({ right: -tw });
             ob.animate({ right: ww }, 20000, 'linear', function() {
                 ob.trigger('marquee');
             });
         }).trigger('marquee');
     
     });
     </script>


<div class="scroll">
    <div class="scrollingtext"> Flash message without marquee tag using javascript!  </div>
 </div>
我将上述jQuery代码转换为纯JavaScript代码：https://stackoverflow.com/questions/69454348/jquery-transform-animate-translation-to-pure-javascript/69459159#69459159 - Phil Huhn
0

通过与@Stano的代码和一些jQuery的合作，我创建了一个脚本，它将用标准的

替换旧的标签。该代码还将解析属性，如direction、scrolldelay和scrollamount。

以下是代码：

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 示例。
0

最近我在开发一个需要跑马灯的网站，一开始使用了动态跑马灯，效果不错，但是我无法让文字从屏幕外开始滚动。于是我四处寻找，但没有找到我想要的简单方法，于是我自己写了一个：

<div id="marquee">


<script type="text/javascript">

  let marquee = $('#marquee p');
  const appendToMarquee = (content) => {
    marquee.append(content);
  }
  
  const fillMarquee = (itemsToAppend, content) => {
    for (let i = 0; i < itemsToAppend; i++) {
      appendToMarquee(content);
    }
  }
  
  const animateMarquee = (itemsToAppend, content, width) => {
    fillMarquee(itemsToAppend, content);
    marquee.animate({left: `-=${width}`,}, width*10, 'linear', function() {
      animateMarquee(itemsToAppend, content, width);
    })
  }


  const initMarquee = () => {
    let width = $(window).width(),
    marqueeContent = "YOUR TEXT",
    itemsToAppend = width / marqueeContent.split("").length / 2;
    animateMarquee(itemsToAppend, marqueeContent, width);
  }

  initMarquee();
</script>

而且CSS：

#marquee {
  overflow: hidden;
  margin: 0;
  padding: 0.5em 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000;
  color: #fff;
}

#marquee p {
  white-space: nowrap;
  margin: 0;
  overflow: visible;
  position: relative;
  left: 0;
}
嘿，这会将跑马灯内容不断添加到 p 标签中。我觉得这是一个不好的想法。 - Phil Huhn
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接