The marquee element implements effects such as scrolling fonts and pictures

The marquee element implements effects such as scrolling fonts and pictures
The marquee element can achieve simple font (image, etc.) sliding and other effects:

Copy code
The code is as follows:

<style type="text/css">
#div01{
width: 500px;
}
</style>
<script type="text/javascript">
</script>
<marquee behavior="alertnate"><font size=30 color='red'>www.baidu.com111</font></marquee>
<marquee direction=right bgcolor='#ff2233' behavior="alertnate"><font size=30 color='blue'>www.baidu.com222</font></marquee>
<marquee id="m3" direction=down bgcolor='#dbdbdb' height=50px hspace=20px vspace=20px behavior="alertnate" scrollLeft=left onmouseover="this.stop()" onmouseout="this.start()"><font size=30 color='blue'>www.baidu333.com</font></marquee>
<marquee id="m4" direction=up bgcolor='#00dbdb' behavior="alertnate"><font size=30 color='blue'>www.baidu444.com</font></marquee>



<div id="div01"><marquee direction=right bgcolor='#ff2233' behavior="alertnate" scrolldelay=100><font size=30 color='blue'>www.baidu.com555</font></marquee></div>
<input type="button" onclick="m3.stop();" value="m3.stop"></input>
<input type="button" onclick="m3.start();" value="m3.start"></input>
<button onclick="m4.stop();">m4.stop</button>
<button onclick="m4.start();">m4.start</button>

direction indicates the scrolling direction. The values ​​can be left, right, up, down. The default value is left.
behavior indicates the scrolling mode. The value can be scroll (continuous scrolling), slide (slide once), alternate (scrolling back and forth).
loop indicates the number of loops, the value is a positive integer, the default is an infinite loop
scrollamount indicates the movement speed, the value is a positive integer, the default value is 6
scrolldelay indicates the pause time. The value is a positive integer. The default value is 0. The unit seems to be milliseconds.
align indicates the vertical alignment of the element. The value can be top, middle, bottom. The default value is middle.
bgcolor indicates the background color of the motion area. The value is a hexadecimal RGB color. The default value is white.
Height and width represent the height and width of the motion area. The value is a positive integer (in pixels) or a percentage. The default width is 100%. Height is the height of the element in the tag.
hspace and vspace represent the horizontal and vertical distances from the element to the region boundary. The values ​​are positive integers in pixels.
onmouseover=this.stop() onmouseout=this.start() means that scrolling stops when the mouse is above the area, and continues when the mouse is moved away.

The following is the setting for scrolling or stopping of m3 and m4 when the button is clicked:

Copy code
The code is as follows:

<input type="button" onclick="m3.stop();" value="m3.stop"></input>
<input type="button" onclick="m3.start();" value="m3.start"></input>
<button onclick="m4.stop();">m4.stop</button>
<button onclick="m4.start();">m4.start</button>

<<:  Implementation of mysql backup strategy (full backup + incremental backup)

>>:  25 fresh useful icon sets for download abroad

Recommend

Mini Program Custom TabBar Component Encapsulation

This article example shares the specific code for...

What does the "a" in rgba mean? CSS RGBA Color Guide

RGBA is a CSS color that can set color value and ...

In-depth understanding of umask in new linux file permission settings

Preface The origin is a question 1: If your umask...

wget downloads the entire website (whole subdirectory) or a specific directory

Use wget command to download the entire subdirect...

What does mysql database do

MySQL is a relational database management system ...

Solution to MySQL Chinese garbled characters problem

1. The Chinese garbled characters appear in MySQL...

Teach you how to make cool barcode effects

statement : This article teaches you how to imple...

Example of using javascript to drag and swap div positions

1 Implementation Principle This is done using the...

Detailed explanation of Socket (TCP) bind from Linux source code

Table of contents 1. A simplest server-side examp...

CSS3 achieves flippable hover effect

CSS3 implements a flippable hover effect. The spe...

Linux kernel device driver advanced character device driver notes

/****************** * Advanced character device d...

Vue3 encapsulates its own paging component

This article example shares the specific code of ...

Docker starts in Exited state

After docker run, the status is always Exited Sol...

Commonly used js function methods in the front end

Table of contents 1. Email 2. Mobile phone number...

Understand all aspects of HTTP Headers with pictures and text

What are HTTP Headers HTTP is an abbreviation of ...