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
How to implement encryption and decryption of sensitive data in MySQL database
Table of contents 1. Preparation 2. MySQL encrypt...
CSS3 property line-clamp controls the use of text lines
Description: Limit the number of lines of text di...
Detailed tutorial on installing Docker and docker-compose suite on Windows
Table of contents Introduction Download and insta...
Sharing experience on MySQL slave maintenance
Preface: MySQL master-slave architecture should b...
Details on using JS array methods some, every and find
Table of contents 1. some 2. every 3. find 1. som...
Detailed explanation of the idea of achieving the point-earning effect with CSS animation
In the recent project, we need to create an effec...
Detailed explanation of the implementation method and usage of CSS3 border-radius rounded corners
In the past, it was quite troublesome to achieve ...
Analysis of several situations where MySQL index fails
1. Best left prefix principle - If multiple colum...
How to modify the scroll bar style in Vue
Table of contents First of all, you need to know ...
CSS achieves footer "bottom absorption" effect
We often encounter this problem: how to use CSS t...
Analysis of the difference between emits and attrs in Vue3
Table of contents in conclusion Practice Analysis...
Summary of several commonly used string methods in JavaScript (must-read for beginners)
Several commonly used string methods in JavaScrip...
Analysis of Linux configuration to achieve key-free login process
1.ssh command In Linux, you can log in to another...
Docker installation method and detailed explanation of Docker's four network modes
1. Install Docker yum -y install docker-io The &q...
CSS to achieve text on the background image
Effect: <div class="imgs"> <!-...