Javascript Marquee 替换 <marquee> 标签

IT技术 javascript html marquee
2021-01-18 12:31:24

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

它向左滚动,但我需要它相对无缝地重复。此刻它只是跳回到开始。我这样做的方式可能不可能,如果没有,有人有更好的方法吗?

6个回答

这是一个具有很多功能的 jQuery 插件:

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

而这个“丝般顺滑”

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

我对这些或其他任何东西都没有任何运气进行环绕。他们等待最后一件事结束后再去清除屏幕,有什么想法吗?
2021-03-29 12:31:24
第一个链接已死。
2021-04-08 12:31:24

简单的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'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#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

我知道这个答案已经有一年了,但我希望我仍然能得到回复。我如何调整此解决方案以进行无缝垂直滚动而不是水平滚动?
2021-03-30 12:31:24
这也适用于任何内容,而不仅仅是文本
2021-04-09 12:31:24

我最近使用 Cycle 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>    

HTML5 不支持该标签,但是许多浏览器仍会“正确”显示文本,但您的代码不会验证。如果这对您来说不是问题,那可能是一种选择。

据称,CSS3 能够拥有选取框文本,但是因为任何知道如何去做的人都认为这对 CSS 来说是一个“坏主意”,所以我在网上找到的信息非常有限。即使是 W3 文档也没有详细说明业余爱好者或自学者来实施它。

PHP 和 Perl 也可以复制这种效果。为此所需的脚本将非常复杂,并且比任何其他选项占用更多资源。也有可能脚本在某些浏览器上运行速度过快,导致效果完全无效。

回到 JavaScript - 您的代码 (OP) 似乎是我发现的最干净、最简单、最有效的代码。我会尝试这个。对于无缝的事情,我将研究一种方法来限制结束和开始之间的空白,可能是做一个 while 循环(或类似的)并实际运行两个脚本,让一个在另一个处理时休息。

也可能有一种方法可以通过单个函数更改来消除空白。我是 JS 的新手,所以不知道我的头顶。- 我知道这不是一个完整的答案,但有时想法会导致结果,即使只是对其他人。

我很想知道您如何想象 PHP 可以“复制”客户端的字幕效果 - 考虑到 PHP 是一种服务器端语言...请告诉?
2021-03-15 12:31:24

此脚本用于替换选框标签

<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: stackoverflow.com/questions/69454348/...
2021-04-11 12:31:24