Pure html code to achieve scrolling effect through marquee tag-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Pure html code to achieve scrolling effect through marquee tag

May 23, 2017 am 10:04 AM

This article introduces you to the use of html tags - <marquee></marquee> can achieve a variety of scrolling effects without js control. It is very good and has reference value. Friends who are interested can take a look.

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

Using marquee tags can not only move text, but also pictures, tables, etc.

Syntax: <marquee>. ..</marquee>; Description: Add content to be scrolled between markers.

Important Properties:

1.Scroll directiondirection(includes 4 Values: up, down, left and right)

Syntax: <marquee direction="scroll direction">...</marquee>

2. Scroll behavior (scroll: Cycle scrolling, default effect; slide: scroll only once and then stop; alternate: scroll alternately back and forth)

Syntax: &lt ;marquee behavior="Scrolling mode">...</marquee>

3. Scroll speed scrollamount (Scroll speed is to set the length of movement each time you scroll, in pixels)

Syntax: <marquee scrollamount="5">...</marquee>

4. Scroll delay scrolldelay (set the scrolling interval, in milliseconds)

Syntax: <marquee scrolldelay="100">...</marquee>

5. Scroll loop loop (the default value is -1, scrolling will continue to loop)

Syntax: <marquee loop="2">...</marquee>

6. Scroll rangewidth、height

7. Scroll background color bgcolor

8. Blank space hspace, vspace

JavaScript CodeCopy content to clipboard

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;   
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;   
&lt;head&gt;   
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;   
&lt;title&gt;无标题文档&lt;/title&gt;   
&lt;/head&gt;   
&lt;body&gt;   
&lt;p&gt;   
&lt;marquee direction=&quot;up&quot; behavior=&quot;scroll&quot; scrollamount=&quot;1&quot; scrolldelay=&quot;0&quot; loop=&quot;-1&quot; width=&quot;1000&quot; height=&quot;50&quot; bgcolor=&quot;#0099FF&quot; hspace=&quot;10&quot; vspace=&quot;10&quot;&gt;   
指整个Marquee对齐方式; (2)behavior:设置滚动的方式: scroll:表示由一端滚动到另一端,会重复,缺陷是不能无缝滚动。 slide:表示由一段滚动到另一端,不会重复...   
&lt;/marquee&gt;   
&lt;/p&gt;   
&lt;/body&gt;   
&lt;/html&gt;

Copy after login

【Related recommendations】

1. HTML free video tutorial

2. Code examples of writing personal resumes in HTML

3. Share three methods of creating new elements

4. Detailed examples of meta tags in html

5. Share an integration of HTML knowledge points

The above is the detailed content of Pure html code to achieve scrolling effect through marquee tag. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn