How to set image scrolling in html marquee tag? Image scrolling code example for marquee tag

This article mainly introduces the attributes of html marquee tags and examples of image scrolling usage of marquee tags. You can experiment more, so that the effect will be better. Let’s take a look at this article together

To set up image scrolling, we first understand the attributes of several html marquee tags:

• innerHTML: Set or get the HTML located within the start and end tags of the object

• scrollHeight: Get the scroll height of the object.

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

• scrollTop: Sets or Get the distance between the top of the object and the top of the visible content in the window

• scrollWidth: Get the scroll width of the object

• offsetHeight: Get the height of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent property

• offsetLeft: Get the calculated left position of the object relative to the layout or the parent coordinate specified by the offsetParent property

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

• offsetWidth: Gets the object relative to the layout or The width of the parent coordinate specified by the parent coordinate offsetParent attribute

After you can figure this out, let’s take a look at a scrolling example:

<marquee align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">
　需要滚动的文字
　需要滚动的文字
　也可以程序代码
<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg"  class="lazy"   alt="How to set image scrolling in html marquee tag? Image scrolling code example for marquee tag" >
　</marquee >

I have inserted a picture above, the effect is dynamic, the screenshot is not very good, but we have to take a look, as shown in the picture:

This is seamless scrolling of. We need to understand the properties inside before we can understand the principle. In fact, it is not difficult.

html Marquee tag image scrolling instructions:

1.The content in the middle can be Text, pictures, or text or pictures generated by the program

2.onMouseOut="this.start()": Used to set the mouse to continue scrolling when it moves out of the area

onMouseOver= "this.stop()": used to set the mouse to stop scrolling when the mouse moves into this area

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

<marquee align="absbottom">align="absbottom"：绝对底部对齐（与g、p等字母的最下端对齐）。 </marquee>
<marquee align="absmiddle">align="absmiddle"： 绝对中央对齐。 </marquee>
<marquee align="baseline">align="baseline"： 底线对齐。 </marquee>
<marquee align="bottom">align="bottom"： 底部对齐（默认）。 </marquee>
<marquee align="left">align="left"： 左对齐。 </marquee>
<marquee align="middle">align="middle"： 中间对齐。 </marquee>
<marquee align="right">align="right"： 右对齐。 </marquee>
<marquee align="texttop">align="texttop"： 顶线对齐。 </marquee>
<marquee align="top">align="top"： 顶部对齐。 </marquee>

• behavior: Set the scrolling method

• alternate: Indicates scrolling back and forth between the two ends.

• scroll: It means scrolling from one end to the other end, and it will repeat.

• slide: Indicates scrolling from one end to the other without repetition.

html The image scrolling code of the marquee tag is as follows:

<marquee behavior="alternate">alternate：表示在两端之间来回滚动。 </marquee>
<marquee behavior="scroll">scroll：表示由一端滚动到另一端，会重复。</marquee>
<marquee behavior="slide">slide：  表示由一端滚动到另一端，不会重复。</marquee>

bgcolor: Set the background color of the active subtitles. The background color can be RGB, 16 Set the format of the hexadecimal value or the color name.

html The benefits of the marquee tag:

The automatic scrolling effect of the page can be achieved by javascript, but today I accidentally discovered an html tag - < ;/marquee>A variety of scrolling effects can be achieved without js control.

You can use marquee tags not only to move text, but also to move pictures, tables, etc.

[Editor’s recommendation]

How to set the font color in html? Introduction to the method of setting font color in css

#html How to set the color of a tag? Summary of color settings for hyperlinks (css style)

The above is the detailed content of How to set image scrolling in html marquee tag? Image scrolling code example for marquee tag. For more information, please follow other related articles on the PHP Chinese website!