Internet Explorer 3.0 supported a simple Marquee element for scrolling text horizontally. In Internet Explorer 4.0, the Marquee element was enhanced with a complete object model plus the ability to support and render any HTML code. This new Marquee control can even contain controls, which respond appropriately to mouse clicks and keyboard input as they move by. Other enhancements include the ability to scroll in any direction—left, right, up, or down.
A marquee can display one of three behaviors alternate, scroll, and slide. In alternate mode, the marquee's contents move back and forth or up and down, always remaining on the screen. In scroll and slide modes, the contents move in one direction. They may appear from the right marquee border, for example, and move left across the screen. In scroll mode, the motion does not repeat until after all of the contents have scrolled onto and off the marquee. In slide mode, the motion repeats sooner, after the last of the contents have scrolled onto the marquee. With any of these three behaviors, you can specify a finite number of repetitions or allow the marquee to continue animating until the user jumps to another page.
The marquee attributes are exposed as properties that can be dynamically modified. For some of these properties, assigning a new value while the marquee is running causes the marquee to restart its animation; with others, it does not. The following table describes the attributes and how changing them affects the marquee.
| Attribute/Property | Restarts Marquee? | Description |
| behavior | Yes | Specifies the alternate, scroll, or slide behavior for the marquee. The default value is scroll. |
| direction | No | Specifies the direction of motion. All four directions are supported: left, right, up, and down. The default value is right. |
| height | Yes | Specifies the physical height of the marquee. |
| loop | Yes | Specifies the number of times for the animation to repeat. The default value is infinite. |
| scrollAmount | No | Specifies the number of pixels to move each time the contents are redrawn. The default value is 6. |
| scrollDelay | No | Specifies the number of milliseconds between times the contents are redrawn. The default value is 85. |
| trueSpeed | No | Specifies whether the marquee should catch up with any skipped cycles. The default value is false, which causes the marquee to act as it does in Internet Explorer 3.0. |
| width | Yes | Specifies the physical width of the marquee. |
The Marquee element supports all the standard mouse and keyboard events. All elements contained within the marquee also continue to fire their respective events. The following table describes the events that the marquee exposes during the animation.
| Event | Description |
| onstart | The marquee is about to begin scrolling. For a marquee in scroll or slide mode, this event fires each time a new animation sequence is about to be initiated. For a marquee in alternate mode, this event fires once at the beginning of the animation. |
| onbounce | The marquee animation has reached the end and will reverse itself. This event fires when the Marquee's behavior property is set to alternate. |
| onfinish | The marquee has finished scrolling. |
The Marquee element exposes two methods for starting and stopping the animation: start and stop. These methods can be used to manually control the scrolling of a marquee.
Using the stop and start methods, the following code allows the user to stop and start a marquee by holding down and releasing the mouse button over the marquee. By stopping the marquee, the user can read its contents more easily. The marquee's title attribute is displayed as a ToolTip when the mouse is held over the Marquee element.
<HTML> <HEAD> <TITLE>Marquee stop and start Methods</TITLE> </HEAD> <BODY> <MARQUEE TITLE="Hold down the mouse button to stop the marquee." ONMOUSEDOWN="this.stop();" ONMOUSEUP="this.start();"> <H1>Test Marquee</H1> <P>Clicking the mouse button and holding it down stops the marquee from scrolling.</P> <INPUT TYPE=BUTTON VALUE="Demo Button" ONCLICK="alert(`clicked');"> </MARQUEE> </BODY> </HTML>