代码之家 › 专栏 › 技术社区 › kiran lanke

如何在JavaScript中停止鼠标悬停时的字幕幻灯片显示?

slideshow css html javascript

kiran lanke · 技术社区 · 12 年前

我想在鼠标悬停时停止幻灯片放映,然后在鼠标离开时开始。
我在堆栈溢出中看到了一些建议。
在这方面,我没有得到任何解决方案(可能这是我的错,无法根据我的代码理解其他代码。因此,我将给出我的代码)。

<marquee height="80%" width="600px" direction="left" scrolldelay="120" align="middle">
<div class="itemMar"><img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" width="120px" height="120px" border="5"/><br /><p style="text-align: center;">name</p><p style="text-align: center;">0123456789</p><p style="text-align: center;">ssc</p>
    </div>
  <div class="itemMar"><img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" width="120px" height="120px" border="5"/><br /><p style="text-align: center;">name</p><p style="text-align: center;">0123456789</p><p style="text-align: center;">ssc</p>
    </div>
  <div class="itemMar"><img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" width="120px" height="120px" border="5"/><br /><p style="text-align: center;">name</p ><p style="text-align: center;">0123456789</p><p style="text-align: center;">ssc</p>
    </div>
  <div class="itemMar"><img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" width="120px" height="120px" border="5"/><br /><p style="text-align: center;">name</p ><p style="text-align: center;">0123456789</p><p style="text-align: center;">ssc</p>
    </div>

        </marquee>

3 回复 | 直到 12 年前

Dinesh Babu 12 年前

试试这个

<marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();"></marquee>

<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();"></marquee>

Tuanderful 12 年前

如果不想内联编写JavaScript,可以将其放在JavaScript文件中:

marquee = document.getElementsByTagName('marquee')[0];
marquee.onmouseover = function(){
  this.stop();
}
marquee.onmouseout = function(){
  this.start();
}

下面是一个演示: http://jsfiddle.net/8fymm/1/

i'm PosSible 12 年前

试试这个,

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

看你的直播 Demo