Javascript Marquee取代<marquee>标签

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

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

---

这里有一个有很多特性的jQuery插件：

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

而这个是“丝绸般光滑”

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

---

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

---

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

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

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

所以回到JavaScript - 你的代码（OP）似乎是关于我找到的最干净，最简单，最有效的。 我会尝试这个。 对于无缝的事情，我会研究一种限制结束和开始之间的空白区域的方法，可能是通过一个while循环（或类似的）来实现，并且实际运行两个脚本，让一个脚本休息而另一个脚本处理。

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

链接地址: http://www.djcxy.com/p/66415.html

上一篇: Javascript Marquee to replace <marquee> tags

下一篇: Which NoSQL database best for append only audit logging use case?