javascript - 使用 JS 打开和关闭 Marquee

Question

我正在使用类似的代码

<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 实现吗？

Answer 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/