Question

我使用以下HTML代码水平滚动文字：

<marquee behavior="scroll" direction="left" onmouseover="this.start();" onmouseout="this.stop();">Go on... hover over me!</marquee>

我遇到的问题是，一旦您访问该页面，marquee就会自动开始滚动。我想要做的是冻结marquee，直到你鼠标移开。

Answer 1

我会在这里听起来居高临下......

2013年。The marquee tag is dead. It is browser specific. It is just plain wrong and was a mistake to begin with.

在语义html的现代时代，应该使用html来定义内容。视觉样式应该应用CSS和视觉效果，CSS补充javascript（如果需要）。

有关现代方法的biref概述，请参阅this article。

有纯CSS3方法：http://www.hongkiat.com/blog/css3-animation-advanced-marquee/

并且可能最适合您：javascript（和jQuery）解决方案：http://remysharp.com/2008/09/10/the-silky-smooth-marquee/。 注意：链接解决方案中的示例使用marquee标记，但您不限于使用marquee标记。您可以使用任何有效的jquery选择器。

Answer 2

<marquee id="myMarquee" behavior="scroll" direction="left" onmouseover="this.start();" onmouseout="this.stop();">Go on... hover over me!</marquee>

<body onload="document.getElementById('myMarquee').stop();">

Answer 3

您可以修改scrollAmount而不是调用start（）和stop（），并且最初将scrollamount设置为0。 E.g。

<marquee behavior="scroll" direction="left" scrollamount="0" onmouseover="this.scrollAmount = 6" onmouseout="this.scrollAmount = 0">Go on... hover over me!</marquee>

请参阅http://jsfiddle.net/svt9L/

_{请注意，这是您问题的直接答案。不过，我完全赞同Jon P的回答。有比使用marquee元素更好的解决方案。}

Answer 4

尝试其中一种。

<!-- MOVING UP -->
<marquee direction="up" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);"></marquee>

<!-- MOVING DOWN -->
<marquee direction="down" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);"></marquee>

<!-- MOVING LEFT -->
<marquee direction="left" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);"></marquee>

<!-- MOVING RIGHT -->
<marquee direction="right" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);"></marquee>

HTML / JavaScript：如何停止marquee onload，并开始鼠标悬停？

4 个答案: