打开&使用JS关闭Marquee

时间:2013-05-02 04:53:50

标签: javascript html marquee

我正在使用类似

的代码
<marquee behavior="slide" direction="up" scrollamount="3" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 3, 0);">
<div id="mdivx">
    <a href="art.php?code=W1"><img src="im/tart/W1.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W2"><img src="im/tart/W2.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W3"><img src="im/tart/W3.jpg" width="75px" align="middle"></a><br/><br/>                                                          <a href="art.php?code=W4"><img src="im/tart/W4.jpg" width="75px" align="middle"></a><br/><br/><a href="art.php?code=W5"><img src="im/tart/W5.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W6"><img src="im/tart/W6.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W7"><img src="im/tart/W7.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W8"><img src="im/tart/W8.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W9"><img src="im/tart/W9.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W10"><img src="im/tart/W10.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W11"><img src="im/tart/W11.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W12"><img src="im/tart/W12.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W13"><img src="im/tart/W13.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W14"><img src="im/tart/W14.jpg" width="75px" align="middle"></a><br/><br/>
</div>
</marquee>

我想使用一个按钮,这样当我点击该按钮时,必须启动选框,当我点击关闭按钮时,选框必须停止。我可以使用JavaScript实现这一目标吗?

3 个答案:

答案 0 :(得分:1)

CODE

<marquee behavior="scroll" direction="left" id="mymarquee"> <p>Go on... press the button!</p> </marquee> <input type="button" value="Stop Marquee" onClick="document.getElementById('mymarquee').stop();"> <input type="button" value="Start Marquee" onClick="document.getElementById('mymarquee').start();">

工作演示http://jsfiddle.net/cse_tushar/r4QpN/

答案 1 :(得分:1)

停止选取框时会显示滚动条。 使用jQuery版本1.9.1

HTML

<marquee behavior="slide" direction="up" scrollamount="3" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 3, 0);"id="mymarquee">
<div id="mdivx">
    <a href="art.php?code=W1"><img src="im/tart/W1.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W2"><img src="im/tart/W2.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W3"><img src="im/tart/W3.jpg" width="75px" align="middle"></a><br/><br/>                                                          <a href="art.php?code=W4"><img src="im/tart/W4.jpg" width="75px" align="middle"></a><br/><br/><a href="art.php?code=W5"><img src="im/tart/W5.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W6"><img src="im/tart/W6.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W7"><img src="im/tart/W7.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W8"><img src="im/tart/W8.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W9"><img src="im/tart/W9.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W10"><img src="im/tart/W10.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W11"><img src="im/tart/W11.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W12"><img src="im/tart/W12.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W13"><img src="im/tart/W13.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W14"><img src="im/tart/W14.jpg" width="75px" align="middle"></a><br/><br/>
</div>
</marquee>
<div id="mdivx1">
</div>
        <br/> <input type="button" value="Stop Marquee" id="stop">
<input type="button" value="Start Marquee" id="start">

CSS

#mdivx1
{
    display:none;
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
    height:200px;
}

的jQuery

$(document).ready(function(){
    $('#mdivx1').hide();
    $('#stop').click(function(){
        $('#mymarquee').hide();
        $('#mdivx1').show().html($('#mdivx').html());
    });
    $('#start').click(function(){
        $('#mymarquee').show();
        $('#mdivx1').hide().html();
    });
});

工作演示 http://jsfiddle.net/cse_tushar/VXm5W/

答案 2 :(得分:0)

<marquee behavior="scroll" direction="left" id="mymarquee">
<p>Go on... press the button!</p>
</marquee>
<input type="button" value="Stop Marquee" onClick="document.getElementById('mymarquee').stop();">
<input type="button" value="Start Marquee" onClick="document.getElementById('mymarquee').start();">