How HTML Marquee tags can scroll up and down, marquee the scrolling speed setting of the label

Source: Internet
Author: User
This article mainly introduces two usages of HTML marquee tags. One is to let the text in the marquee tag scroll up and down, and the other is to make the text in the marquee tag scroll faster or slower. You can also use two of them together. Now let's see this article together.

Let's first recognize this HTML marquee tag:

This marquee tag has previously written about some of its usage and properties, what can you click in the HTML scroll bar code? How do I set the HTML scroll bar? look at that.

<marquee> tag, which is a paired-up label, the content between the first label <marquee> and the tail tag </marquee> is the scrolling content. The properties of <marquee> tags are mainly behavior, bgcolor, direction, width, height, hspace, vspace, Loop, scrollamount, scrolldelay, etc. They are all optional.

Now look at how the marquee tag is implemented to scroll up and down:

The Behavior property of the HTML marquee tag:

The parameter value of the Behavior property is one of alternate, scroll, and slide, which indicates that the text scrolls back and forth, scrolls in one Direction, and scrolls only once, and it is important to note that: if the <marquee> Both the direction and behavior properties appear in the label, then the scrolling direction of scroll and slide will follow the settings of the parameters in the direction attribute.

<marquee behavior= "Alternate" > I scroll back and forth </marquee><marquee behavior= "Scroll" > I scroll in single direction </marquee ><marquee behavior= "Scroll" direction= "Up" height= "a" > I change One Direction upward cycle </marquee> <marquee behavior= " Slide "> I only scroll once </marquee><marquee behavior=" slide "direction=" up "> I changed it up only once </marquee>

BgColor the background color of the property text scrolling range, the parameter value is 16 binary (form: #AABBCC或 #aa5566, etc.) or predefined color names (such as red, yellow, blue, and so on). As follows: <marquee behavior== "Slide" direction= "left" bgcolor= "red" > My background color is red </marquee>

There are also direction properties for the HTML marquee tag:

The direction of the text scrolling, the parameter value of the property has a total of four single selectable values, left, right, and up, respectively, representing the scroll direction downward, leftwards, rightwards, upward. As shown below:

<marquee direction= "Right" > Me to scroll </marquee><marquee direction= "left" > I scroll to the left </marquee>< Marquee direction= "Down" > I scroll </marquee><marquee direction= "Up" > I scroll up </marquee>

The main is the following two, is the first introduction of this article scroll up and down, set this will allow the text inside the scroll up and down effect.

Now, let's talk about the scrolling speed of the marquee tag:

Which property is the scrolling speed of this HTML marquee tag? Is there anyone who can guess ...

Well, I'll tell you what, it's ScrollAmount and Scrolldelay properties:

These two properties determine the speed (scrollamount) and delay (scrolldelay) of the text scrolling, and the parameter values are positive integers. As shown below:

<marquee scrollamount= ">" I'm fast. </marquee><marquee scrollamount= "" > I'm a little slow. </marquee><marquee scrolldelay= ">" I step forward. </marquee><marquee scrolldelay= "scrollamount=" > I strode forward. </marquee>

You can set specific numbers, how fast you want to be, how slow you want to be, isn't it fun. But because all is a dynamic diagram, are not good, to recommend a direct copy can be the effect of the Web address: http://www.php.cn/code/26516.html, as long as the above code to copy in to show the effect. We can try it.

All right, here are the two uses of the HTML marquee tag. If you have questions, you can ask below.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.