What is the code for the scroll bar in HTML? How do I set the HTML scroll bar?

Source: Internet
Author: User
This article mainly introduces the code of the scroll bars in HTML, and the use of the HTML ScrollBar code marquee tag Properties, let's take a look at this article.

First we introduce the scroll bar code in HTML:

Today we introduce this HTML scroll bar label to be marquee.

<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, let's talk about setting the HTML scroll bar:

Let's see how the marquee tag uses its properties to implement the HTML scroll bar.

The Behavior property of the 1.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 roll back and forth </marquee> <marquee behavior= "Scroll" > I loop through the </marquee in one Direction ><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 have to scroll up only once </marquee>

Style is very good-looking, are dynamic, can not be cut out, we are interested in the practice here, as long as the above code to copy down, and then http://www.php.cn/code/26516.html here paste up, immediately can see the effect, There's no need to add the code back up so you can show a lot of things you want to see.

This is just one of the properties, and then there are a few more properties, let's take a look at it:

The bgcolor property of the 2.html marquee tag:

The background color of the text scrolling range, the parameter value is 16 binary (form: #AABBCC或 #aa5566, etc.) or predefined color names (such as red, yellow, blue, etc.). As shown below:

<marquee behavior== "Slide" direction= "left" bgcolor= "red" > My background color is red </marquee>

The direction property of the 3.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" > I'm scrolling to the left </marquee>     <marquee direction= "OK" > I scroll down </marquee >

Width and Height properties of the 4.html Marquee label:

The effect of the width and Height properties determines the size of the rectangular range of scrolling text in the page. The Width property is used to specify the thickness of the rectangle, which specifies the height of the rectangle. The parameter values for these two properties can be numbers or percentages, which represent the (wide or high) pixel count of the rectangle, which represents the percentage (wide or high) of the browser window that the rectangle occupies. As shown below:

    <marquee width= "height=" bgcolor= "Red" > I am 300 pixels wide and 30 pixels high. </marquee>

The ScrollAmount and Scrolldelay properties of the 5.html marquee tag:

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 am very fast .</marquee>     <marquee scrollamount= ">" I'm a little slow. </marquee>     <marquee scrolldelay= "" > I step forward. </marquee>     <marquee scrolldelay= "scrollamount=" > I strode forward. </marquee>

The Align property of the 6.html marquee tag:

This property determines whether the scrolling text is positioned up or down the border within the shape. You can also replace the content between <marquee> and </marquee> with features such as images or other objects.

Comments about the HTML marquee tag:

The default width of the marquee element is equal to the width of its parent element. If marquee is in a TD with no specified width, you need to explicitly set the width of the marquee. If the width of the marquee and TD is not specified, then the scrolling caption will be limited to 1 pixels wide.

To create a caption that scrolls vertically, set its ScrollLeft property to 0. To create a marquee that scrolls horizontally, set its ScrollTop property to 0, which overrides any script settings.

The ScrollLeft and ScrollTop properties are read-only when the caption is scrolled. When not in a scrolling state, the scrollleft is read-write for subtitles set to scroll horizontally, and scrolltop is readable and writable for subtitles set to vertical scrolling.

This element is available in HTML for Microsoft Internet Explorer 3.0 and is available in scripts in the Internet Explorer4.0.

This element is a block element.

This element needs to close the label.

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.