HTML/JavaScript：如何停止选取框加载，并在鼠标悬停时启动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15246132/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/JavaScript: How to stop marquee onload, and start on mouseover?
提问by John Smith
I'm using the following HTML piece of code to scroll text horizontally:
我正在使用以下 HTML 代码来水平滚动文本：
<marquee behavior="scroll" direction="left" onmouseover="this.start();" onmouseout="this.stop();">Go on... hover over me!</marquee>
The issue I have is that once you visit the page, the marqueestarts scrolling automatically. What I want to do, is to freeze the marqueeuntil you mouseover.
我遇到的问题是，一旦您访问该页面，就会marquee自动开始滚动。我想要做的是冻结marquee直到鼠标悬停。
采纳答案by Alohci
You could tinker with scrollAmount instead of calling start() and stop(), and just set scrollamount to 0 initially. E.g.
您可以修改 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>
<marquee behavior="scroll" direction="left" scrollamount="0" onmouseover="this.scrollAmount = 6" onmouseout="this.scrollAmount = 0">Go on... hover over me!</marquee>
See http://jsfiddle.net/svt9L/
Note that this is a direct answer to your question. However I fully endorse Jon P's answer. There are better solutions available than using the marquee element.
请注意，这是对您问题的直接回答。但是，我完全赞同 Jon P 的回答。有比使用选取框元素更好的解决方案。
回答by Jon P
I'm going to sound condescending here...
我会在这里显得居高临下......
它是 2013 年。选框标签已经死了。它是特定于浏览器的。这完全是错误的，而且一开始就是一个错误。
In the modern era of semantic html one should be using html to define content. Visual styling should be applied with CSS and visual effects with CSS supplemented with javascript if required.
在语义 html 的现代时代，应该使用 html 来定义内容。如果需要，应使用 CSS 应用视觉样式，使用 CSS 应用视觉效果并辅以 javascript。
See this articlefor a biref overview of a modern approach.
有关现代方法的 biref 概述，请参阅本文。
There are pure CSS3 approaches: http://www.hongkiat.com/blog/css3-animation-advanced-marquee/
有纯 CSS3 方法：http: //www.hongkiat.com/blog/css3-animation-advanced-marquee/
and probably best for you: javascript (and jQuery) solutions: http://remysharp.com/2008/09/10/the-silky-smooth-marquee/. Note:the examples in the linked solution use the marquee tag, but you are not limited to using the marquee tag. You can use any valid jquery selector.
可能最适合您：javascript（和 jQuery）解决方案：http: //remysharp.com/2008/09/10/the-silky-smooth-marquee/。注意：链接解决方案中的示例使用了 marquee 标签，但您不仅限于使用 marquee 标签。您可以使用任何有效的 jquery 选择器。
回答by Waqar Alamgir
<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();">
回答by Muddasir Abbas
Try one of these.
尝试其中之一。
<!-- 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>
