How to achieve the effect of scrolling fonts and pictures using marquee elements

This time I will show you how the marquee element can achieve the effect of scrolling fonts and pictures. What are the things to note?The following is a practical case, let’s take a look. .

marquee element can achieve simple font (picture, etc.) sliding and other effects:

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

<div id="div01"><marquee direction=right bgcolor=&#39;#ff2233&#39; behavior="alertnate" scrolldelay=100><font size=30 color=&#39;blue&#39;>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 represents the direction of scrolling, the value can be left, right, up, down, default is left
behavior represents the scrolling method, the value can be scroll (continuous scrolling) slide (slide once) alternate (scroll back and forth)
loop represents the number of loops, the value is a positive integer, the default is infinite loop
scrollamount Indicates the movement speed, the value is a positive integer, the default is 6
scrolldelay indicates the pause time, the value is a positive integer, the default 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 is middle
bgcolor represents the background color of the motion area, the value is a hexadecimal RGB color, the default is white
height, width represents the height and width of the motion area, the value is a positive integer (unit is pixel) or Percentage, default width=100% height is the height of the element within the label
hspace and vspace represent the horizontal and vertical distances from the element to the area boundary. The value is a positive integer and the unit is pixels.
onmouseover=this.stop() onmouseout=this.start() means that the scrolling stops when the mouse is above the area, and continues to scroll when the mouse moves away.
The following is to set the scrolling or stopping of m3 and m4 when the button is clicked:

<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>

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How to set the border and transparency style of Div

How to use the meta viewport attribute of HTML

How to operate the default style of a tag

How to call the search engine on the page

How to modify the default submission method of form

The above is the detailed content of How to achieve the effect of scrolling fonts and pictures using marquee elements. For more information, please follow other related articles on the PHP Chinese website!