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.