4

我正在使用以下 HTML 代码水平滚动文本：

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

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

4

4 回答 4

10

我在这里听起来很自卑...

它是 2013 年。选框标签已死。它是特定于浏览器的。这完全是错误的，而且一开始就是一个错误。

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

有关现代方法的 biref 概述，请参阅本文。

有纯 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 选择器。

于 2013-03-06T11:48:26.977 回答
3 
<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();">
于 2013-03-06T11:30:52.233 回答
1

您可以修改 scrollAmount 而不是调用 start() 和 stop()，并且最初将 scrollamount 设置为 0。例如

<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 的回答。有比使用选取框元素更好的解决方案。

于 2013-03-06T11:43:20.700 回答
1

尝试其中之一。

<!-- 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>
于 2015-06-05T06:15:29.997 回答