marquee

marquee slow/medium/fast speed using button

Example-Result:

marquee slow/medium/fast speed using button

Example-Code:  

<marquee behavior="scroll" direction="left" id="marquee1" scrollamount="6">marquee slow/medium/fast speed using button</marquee></div>
<div style="text-align: center;">
<input onclick="document.getElementById('marquee1').setAttribute('scrollamount', 1, 0);" type="button" value="Slower" /><input onclick="document.getElementById('marquee1').setAttribute('scrollamount', 5, 0);" type="button" value="Medium" /><input onclick="document.getElementById('marquee1').setAttribute('scrollamount', 10, 0);" type="button" value="Faster" />

Marquee Text Hover to Stop

Example-Code:

<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">Hower over and hold the mouse marquee stop</marquee>
Example-Result:

Hower over and hold the mouse marquee stop

Marquee Text Start/Stop Using Button

 Example-Code:

<marquee behavior="scroll" direction="left" id="marquee10"><p>Press Button</p></marquee>
<input type="button" value="Stop Marquee" onClick="document.getElementById('marquee1').stop();">
<input type="button" value="Start Marquee" onClick="document.getElementById('marquee1').start();">
Example-Result:

Press Button



Multiple Start/Stop Marquee

Example-Code:

<marquee behavior="scroll" direction="left" scrollamount="7" id="marquee2"><p>Marquee 1</p></marquee>
<marquee behavior="scroll" direction="left" scrollamount="15" id="marquee3"><p>Marquee 2</p></marquee>
<input type="button" value="Stop Marquee 1" onClick="document.getElementById('marquee2').stop();">
<input type="button" value="Start Marquee 1" onClick="document.getElementById('marquee2').start();"><br />
<input type="button" value="Stop Marquee 2" onClick="document.getElementById('marquee3').stop();">
<input type="button" value="Start Marquee 2" onClick="document.getElementById('marquee3').start();">

Example-Result:

Marquee 1

Marquee 2