要取代Javascript Marquee <marquee>标签

我对Javascript没有希望。这是我有：要取代Javascript Marquee <marquee>标签

<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>

它滚动到左侧，但我需要它重复相对无缝。目前它只是跳回到开始。如果没有，我可能无法做到这一点，任何人都有更好的方法？

来源

2008-12-03 blork

这里是一个jQuery插件有很多功能：

http://jscroller2.markusbordihn.de/example/image-scroller-windiv/

而这一次“柔滑光滑”

http://remysharp.com/2008/09/10/the-silky-smooth-marquee/

来源

2008-12-03 15:01:00 GeekyMonkey

我并没有与这些或任何其他任何运气回绕。他们等待最后一件事情结束之前再次清除屏幕，有什么想法？ – Maslow 2013-01-18 16:11:32

第一个链接已死。 – Sp0T 2017-02-08 08:11:56

-2

一个简单的谷歌搜索，你会发现你寻找什么：

http://javascript.about.com/library/bltick2.htm

来源

2008-12-03 14:50:45

HTML5不支持标签，但很多浏览器仍然会显示“正常”的文字，但您的代码无法验证。如果这不是你的问题，那可能是一个选择。

CSS3有能力，据说，有字幕文本，但是因为任何知道如何做的人都认为这对CSS来说是个“坏主意”，所以我在网上找到的信息非常有限。即使W3文件没有详细说明爱好者或自学者是如何实施它的。

PHP和Perl也可以复制该效果。为此所需的脚本将非常复杂，并占用比任何其他选项更多的资源。脚本在某些浏览器上运行速度过快也可能导致效果被完全否定。您的代码（OP）似乎是关于我找到的最干净，最简单，最有效的。我会尝试这个。对于无缝的事情，我会研究一种限制结束和开始之间的空白区域的方法，可能是通过一个while循环（或类似的）来实现，并且实际运行两个脚本，让一个脚本休息而另一个脚本处理。

也许还有一种方法可以通过单个功能更改来消除空白。我是JS新手，所以不知道我的头脑。 - 我知道这不是一个全面的答案，但有时想法可能会导致结果，如果只是为了别人。

来源

2011-07-04 11:13:44 AeSix

我很想知道你如何想象PHP可以“复制”客户端字幕效果 - 考虑到PHP是服务器端语言......请告诉我们吗？ – 2011-10-28 14:29:58

简单的JavaScript解决方案：

window.addEventListener('load', function() { 
 
\t function go() { 
 
\t \t i = i < width ? i + step : 1; 
 
\t \t m.style.marginLeft = -i + 'px'; 
 
\t } 
 
\t var i = 0, 
 
\t \t step = 3, 
 
\t \t space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'; 
 
\t var m = document.getElementById('marquee'); 
 
\t var t = m.innerHTML; //text 
 
\t m.innerHTML = t + space; 
 
\t m.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789 
 
\t var width = (m.clientWidth + 1); 
 
\t m.style.position = ''; 
 
\t m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space; 
 
\t m.addEventListener('mouseenter', function() { 
 
\t \t step = 0; 
 
\t }, true); 
 
\t m.addEventListener('mouseleave', function() { 
 
\t \t step = 3; 
 
\t }, true); 
 
\t var x = setInterval(go, 50); 
 
}, true);

#marquee { 
 
    background:#eee; 
 
    overflow:hidden; 
 
    white-space: nowrap; 
 
}

<div id="marquee"> 
 
\t 1 Hello world! 2 Hello world! <a href="#">3 Hello world!</a> 
 
</div>

JSFiddle

来源

2014-10-15 00:15:36 Stano

我最近实施的使用周期2 jQuery插件在HTML选取框： http://jquery.malsup.com/cycle2/demo/non-image.php

<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>

来源

2014-10-17 22:04:22 Manikandan

这个脚本用来替代字幕标记

<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>

看到demo here

来源

2017-01-09 06:22:02

要取代Javascript Marquee <marquee>标签

回答

相关问题