How does the HTML marquee tag set the picture scrolling? Marquee Tagged picture scrolling code example

Source: Internet
Author: User
This article mainly introduces the properties of HTML marquee tags and the picture scrolling usages of marquee tags, you can experiment more, so the effect will be better. Let's see this article together

To set up picture scrolling, let's look at the properties of several HTML marquee tags:

    • InnerHTML: Sets or gets the HTML that is inside the object's start and end tags

    • ScrollHeight: Gets the scroll height of the object.

    • ScrollLeft: Sets or gets the distance between the left edge of the object and the leftmost of the currently visible content in the window

    • ScrollTop: Sets or gets the distance between the top of the object and the top of the visible content in the window

    • ScrollWidth: Gets the scrolling width of the object

    • Offsetheight: Gets the height of the object relative to the layout or parent coordinates specified by the parent coordinate OffsetParent property

    • Offsetleft: Gets the calculated left position of the object relative to the layout or the parent coordinate specified by the OffsetParent property

    • OffsetTop: Gets the computed top position of the object relative to the layout or the parent coordinate specified by the OffsetTop property

    • Offsetwidth: Gets the width of the object relative to the layout or the parent coordinate specified by the parent coordinate OffsetParent property

When you can figure this out, take a look at a scrolling example:

<marquee align= "left" behavior= "scroll" bgcolor= "#FF0000" direction= "Up" height= "+" width= "" hspace= "50" Vspace= "loop="-1 "scrollamount=" "scrolldelay=" "onmouseout=" This.start () "onmouseover=" This.stop () "> Text that needs scrolling can also be program code  </ Marquee >

I have inserted a picture above, the effect is dynamic, not very good-looking, but we also want to see,

This is a seamless scrolling. We have to understand the properties of the inside before we know the principle. It's not so hard, actually.

HTML marquee Label Picture scrolling Description:

1.<marquee ></marquee > Middle content can be text, pictures, or text or pictures generated by the program

2.onmouseout= "This.start ()": To continue scrolling when you set the mouse to move out of the area

Onmouseover= "This.stop ()": To stop scrolling when the mouse is moved into the area

The image scrolling code for the HTML marquee tag is as follows:

<marquee align= "Absbottom" >align= "absbottom": Absolute bottom Alignment (aligns with the lower end of the letters G, p, etc.). </marquee><marquee align= "Absmiddle" >align= "absmiddle": absolute Central alignment. </marquee><marquee align= "Baseline" >align= "baseline": Bottom line Alignment. </marquee><marquee align= "Bottom" >align= "bottom": Bottom-aligned (default). </marquee><marquee align= "left" >align= "Ieft": Justified. </marquee><marquee align= "Middle" >align= "middle": Middle alignment. </marquee><marquee align= "Right" >align= "R": Justified. </marquee><marquee align= "Texttop" >align= "Texttop": Align Top lines. </marquee><marquee align= "Top" >align= "top": Align the tops. </marquee>
    • Behavior: Setting the way to scroll

    • Alternate: Indicates scrolling back and forth between the ends.

    • Scroll: Indicates that one end is scrolled to the other and is repeated.

    • Slide: Represents a scroll from one end to the other and does not repeat.

The image scrolling code for the HTML marquee tag is as follows:

<marquee behavior= "Alternate" >alternate: means scrolling back and forth between the ends. </marquee><marquee behavior= "Scroll" >scroll: Indicates that scrolling from one end to the other is repeated. </marquee><marquee behavior= "Slide" >slide:  indicates that one end is scrolled to the other and does not repeat. </marquee>

BgColor: Sets the background color of the active caption, the background color can be set by RGB, 16 binary value format or color name.

Benefits of HTML Marquee Tags:

Page Auto-scrolling effect, can be implemented by JavaScript, but today inadvertently found an HTML tag-<marquee></marquee> can achieve a variety of scrolling effect, without JS control.

Use marquee tags not only to move text, but also to move pictures, tables, and so on.

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.