Also, please consider keeping the link back to this website - if you do it will be very much appreciated!
Change Marquee Speed with Cursor
Change Marquee Speed on Hover
Here, the user can speed up the marquee by hovering over it. The marquee slows down to normal speed once the user moves the cursor away from the marquee.
We do this by using the
onmousedown="this.setAttribute('scrollamount', 80, 0);". To slow the marquee to normal speed, we use the
onmouseout event, and simply change the
scrollamount back to its original value (i.e.
onmouseup="this.setAttribute('scrollamount', 12, 0);").
Change Marquee Speed on Click
In this example, the user can change the marquee speed by clicking it. This time the marquee slows down when the mouse button is pressed and it speeds up again when the mouse is released.
This code uses the
onmousedown event. To restart it, we use the
onmouseup event. Oh, and just to keep things interesting, let's change the marquee behavior to
alternate (so that it bounces back and forth).
Change Marquee Speed with Buttons
document.getElementById('mymarquee').setAttribute('scrollamount', 50, 0);. The
50 represents the scrollamount that we want the marquee to change to (i.e. the marquee's speed).
Stop, Start, Change Speed...
Here we add a Stop button and a Start button. No prizes for guessing what these do!
If you're interested in stopping your marquee, check out this article on how to programatically stop a marquee.
Combine Click and Hover
If you don't like the idea of having so many buttons lined up under your marquee, you could acheive the same effect by using click and hover instead of the buttons. Like this:
<marquee> tag accepts a number of attributes (some of which are included in the above examples). Feel free to experiment with these settings to see the effect they have on your scrolling text. The full list of attributes are:
|Sets the width of the marquee||How far to jump as it moves|
|Sets the height of the marquee||How many times it should loop|
|Sets the direction of the marquee||Sets the background color of the marquee|
|Whether to slide, bounce, or scroll||Sets the amount of horizontal space around the marquee|
|How long the marquee should wait before each jump||Sets the amount of vertical space around the marquee|