Front-end: Detailed introduction to the usage of barrage tags (marquee)

Danmaku tag

1. Pay attention to the barrage tag marquee, which is not supported by some browsers now.
2. Barrage tags are also called marquees.

marquee format and its attributes

1.Basic format

as follows:

<marquee></marquee>

2. Some attributes

1. direction attribute: Indicates the direction of barrage walking. As shown below, walk left

<marquee direction="left">This wave of operations 6</marquee>

The direction can also be set to up right down, and you can modify the demonstration yourself.

Add the width and height attributes to set the width and height of the scroll: set the height to 300px as follows

<marquee behavior="scroll" direction="up" height="300">I changed the direction to scroll upwards</marquee>

2. Behavior attributes:
The behavior attribute can take multiple values, such as: alternate scroll slide, etc.
If the value is alternatemeans barrageRun from one side of the screen to the other side of the screenThen it immediately bounces back in the opposite direction.
as follows:

<marquee behavior="alternate">I ran from one side of the screen to the other</marquee>

If the value is scroll, it means that the barrage runs from one side to the other and then runs from one side to the other again, as follows:

<marquee behavior="scroll">I scroll in a one-way cycle</marquee>

If the value is slide, it means walking only once in one direction and stopping when it reaches the other side, as follows:

<marquee behavior="slide">I walked in one direction once</marquee>

3. scrollamount attribute
Indicates the speed of movement. The default value is 6. The larger the setting, the faster you run, as follows:

<marquee scrollamount="30">I'm fast</marquee>

4. scrolldelay attribute
Indicates the pause time, in milliseconds as follows:

<marquee scrolldelay="100" scrollamount="100">Speed ​​is suppressed</marquee>

5,bgcolor
Indicates the color of the scroll area, as follows:

<marquee direction="left" bgcolor="red">This wave of operations 6</marquee>

The operation is as shown in the figure:

6. hspace attribute
It means walking as far as you need from the border before you start walking again.
as follows:

<marquee scrollamount="30" hspace="100">Loop again if there are still 100px left from the border.</marquee>

The unit of the value is px. After running, you can find that the barrage re-scrolls when it is still some distance away from the left border.
7. onMouseOut=”this.start()” attribute
It means that when the mouse is placed here, the barrage will move from the starting point again. as follows

<marquee onMouseOut="this.start()">Click here</marquee>

You can see that when the mouse moves to the barrage position and then removed, the barrage starts again.
8. onMouseOut=”this.start()” attribute
It means that when the mouse is placed at the barrage position and removed, the barrage will remain stopped and will not move. as follows:

<marquee onMouseOut="this.stop()">Click here</marquee>

Run the mouse and place it on the barrage to see that the barrage no longer moves.
9. loop attribute
The loop attribute represents the number of times the barrage loops, and the default is unlimited. as follows:

<marquee loop="2">Appears 2 times in a loop</marquee>

After running, you can see that the barrage scrolls twice and then never appears again.

Comprehensive exercise effect:

Code:

<marquee direction="left" bgcolor="red">This wave of operations 6</marquee>  
<marquee behavior="alternate">I scroll back and forth</marquee> 
<marquee behavior="scroll">I scroll in a one-way cycle</marquee>
<marquee behavior="scroll" direction="up" height="300">I changed the direction to scroll upwards</marquee>       
<marquee behavior="slide">I only scroll once</marquee> 
<marquee behavior="slide" direction="up">I changed it to scrolling up only once</marquee> 
<marquee scrollamount="100">I'm very fast.</marquee> 
<marquee scrollamount="30" hspace="100">Loop again if there are still 100px left from the border.</marquee> 
<marquee scrollamount="30" vspace="100">Loop again if there are still 100px left from the border.</marquee> 
<marquee scrolldelay="30">I move forward in small steps.</marquee> 
<marquee onMouseOut="this.start()">Move the mouse here to restart the barrage</marquee> 
<marquee onMouseOut="this.stop()">Move the mouse here and the barrage will stop.</marquee> 
<marquee loop="2" scrollamount="30">Appears 2 times in a loop</marquee> 
<marquee scrolldelay="100" scrollamount="100">I hit my stride.</marquee>

The running effect is as follows:

If you like it, please give it a like, thank you

Related Posts

uniapp – share on WeChat on ios and android, download by opening appStore and app store

uniapp implements interception before tabbar page jumps

[H5 WeChat Authorization] Simple implementation of H5 page WeChat authorization function, WeChat developer tool reports system error, error code -1, undefined solution [Details]

Summary of common css centering methods

Java project: train ticket reservation system (java+JDBC+JSP+Servlet+html+mysql)

Selenium simple common operations (part of WebdriverAPI)

Teach you step by step how to install VSCode (with illustrated steps)

css relative positioning and absolute positioning

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*