Make your text dance with the marquee attribute in HTML

Syntax: <marquee> …</marquee>

Using the mobile attribute marquee, you can not only dance your text, but also apply it to pictures, tables, etc.

<marquee direction=left>Welcome to Kexun Youth Learning Channel! </marquee>

direction=left, indicates direction. The text effect above is "Welcome to Kexun Youth Learning Channel!" moving from right to left! In addition, directions include right, up, and down.

Besides direction, we can add other restrictive elements:

Ways to move:

Loop movement: loop = n (n, indicating the number of times) Move in a circle: behavior = scroll Move only once: behavior = slide Move back and forth: behavior = alternate

Appearance:

Font size: (n, variable) Alignment: align=top/middle/bottom Background color: bgcolor=Blue (predefined colors, such as: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua or hexadecimal numbers)

other:

Speed: scrollmount=n(n, variable) Delay: scrolldelay==n(n, variable)

<marquee direction="moving direction" height="moving area height" width="moving area width" scrollamount="moving speed" onmouseover=this.stop() onmouseout=this.start()>"

onmouseover sets the mouse to pause movement when it is placed in the moving area

onmouseout Continue scrolling when the mouse leaves

Use marquee code to implement text and image scrolling

Today I saw the setting for scrolling text on TAP! It seems that it was not supported before. Maybe I haven't used it! Haha, let me show you the effect!

The following is a code explanation of the scrolling text bulletin board from TAP

marquee parameters:
BGColor: The background color of the scrolling text box.
Direction: Scroll direction setting, you can choose Left, Right, up and down.
scrolldelay: The delay time between each scrolling. The larger the value, the slower the scrolling.
scrollamount: The total amount of time for one scroll. The smaller the number, the slower the scrolling.
Behaviour: The scrolling mode is set. There are three possible values: Scroll (circular scrolling), Slide (single scrolling), and Alternate (back and forth scrolling).
Align: Text alignment settings. You can choose Middle, Bottom or Top.
Width: The width of the scrollable text box. Enter a value and select in Pixels or in Percent from the radio button behind it.
Height: The height of the scroll text box. Enter a value and select in Pixels or in Percent from the radio button behind it.
loop: The number of scrolling times. The default is infinite
hspace, vspace: blank lines before and after, and above and below.

The demonstration below is my bulletin board demonstration: you can see the effect in the lower right corner! If you like it! Copy the code and substitute it into the above code to see the effect!

Effect 1: Text scrolls up

Copy code

The code is as follows:

<marquee direction="up" loop="-1" scrollamount="4">
<div align="left">
</div><center>
</center><div align="left">
</div><center>Site Announcement
Welcome to Xiaojun Resources
Here we share with you the latest free resources and information,
I hope you like it, your support is my greatest motivation!
If you have any suggestions, please let me know! 
The resources on this site are from the Internet, if they infringe your rights! 

Thank you for your support, Xiaojun is wonderful because of you

</center></marquee>

Effect 2: Text scrolls to the left

<marquee direction="left" loop="-1">[Announcement] Some tutorials are original to Tap Knows. Please indicate the source when reprinting! </marquee>

Image scrolling code:

Copy code

The code is as follows:

Just add as much as you want! But it seems that some of the browsing display effects! I suggest you use Google, it works great!

<<: Detailed explanation of transaction isolation levels in MySql study notes

>>: The relationship between web page production and steamed buns (sharing experience)

How to draw a cool radar chart in CocosCreator

Make your text dance with the marquee attribute in HTML

How to draw a cool radar chart in CocosCreator

Detailed explanation of using javascript to handle common events

Detailed explanation of the differences between js array find, some, filter, and reduce

Detailed explanation of the usage of image tags in HTML

Example of how to reference environment variables in Docker Compose

mysql error number 1129 solution

MySQL database transaction example tutorial

How to deal with too many Docker logs causing the disk to fill up

JavaScript to achieve a simple message board case

A detailed introduction to HTML page loading and parsing process

Recommend

MySQL 8.0.18 deployment and installation tutorial under Windows 7

Teach you how to use webpack to package and compile TypeScript code

How familiar are you with pure HTML tags?

Is it necessary to give alt attribute to img image tag?

Summary of WEBAPP development skills (notes for mobile website development)

Element dynamic routing breadcrumbs implementation example

Write a shopping mall card coupon using CSS in three steps

About MYSQL, you need to know the data types and operation tables

Detailed steps for IDEA to integrate docker to achieve remote deployment

Brief analysis of the introduction and basic usage of Promise

MySQL detailed single table add, delete, modify and query CRUD statements

Complete guide to using iframe without borders or borders (practical experience summary)

Do you know how to use mock in vue project?

The difference between useEffect and useLayoutEffect in React

Introduction to container data volumes in Docker