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

Y2J

May 23, 2017 am 10:04 AM

This article introduces you to the use of html tags - 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 - 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: . ..; Description: Add content to be scrolled between markers.

Important Properties:

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

Syntax: ...

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

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

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

Syntax: ...

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

Syntax: ...

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

Syntax: ...

6. Scroll rangewidth、height

7. Scroll background color bgcolor

8. Blank space hspace, vspace

JavaScript CodeCopy content to clipboard

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

【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

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

The Versatility of HTML: Applications and Use CasesApr 30, 2025 am 12:03 AM

HTML is not only the skeleton of web pages, but is more widely used in many fields: 1. In web page development, HTML defines the page structure and combines CSS and JavaScript to achieve rich interfaces. 2. In mobile application development, HTML5 supports offline storage and geolocation functions. 3. In emails and newsletters, HTML improves the format and multimedia effects of emails. 4. In game development, HTML5's Canvas API is used to create 2D and 3D games.

What is the root tag in an HTML document?Apr 29, 2025 am 12:10 AM

TheroottaginanHTMLdocumentis.Itservesasthetop-levelelementthatencapsulatesallothercontent,ensuringproperdocumentstructureandbrowserparsing.

Are the HTML tags and elements the same thing?Apr 28, 2025 pm 05:44 PM

The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

What is the significance of <head> and <body> tag in HTML?Apr 28, 2025 pm 05:43 PM

The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

What is the difference between <strong>, <b> tags and <em>, <i> tags?Apr 28, 2025 pm 05:42 PM

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

Please explain how to indicate the character set being used by a document in HTML?Apr 28, 2025 pm 05:41 PM

Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

What are the various formatting tags in HTML?Apr 28, 2025 pm 05:39 PM

The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?Apr 28, 2025 pm 05:39 PM

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for

See all articles