Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > A simple method to achieve scrolling effect based on HTML tag marquee

A simple method to achieve scrolling effect based on HTML tag marquee

黄舟
Release： 2017-03-17 15:08:40
Original
2020 people have browsed it

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

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

Syntax: ...; Description: Add content to be scrolled between markers.

Important attributes:

1. Scroll direction direction (including 4 values: up, down, left and right)

Syntax: ...

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

Syntax: . ..

3. Scroll speed scrollamount (scroll speed is to set the length of movement per 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 range width , height

7. Scroll background color bgcolor

8. Blank space hspace, vspace

Code example: 

<!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>
Copy after login

The above is the simple method (must see) of the HTML tag marquee that the editor brought to you to achieve the scrolling effect. That’s all, I hope you all like it~

Related articles:

Marquee attribute analysis in HTML

Detailed usage analysis of marquee

Skillfully using the marquee attribute in HTML to achieve dancing text

Related labels：
html marquee scrolling effect
source：php.cn
Previous article：Disable input text box input implementation attributes Next article：A brief analysis of HTML file HEAD internal tags
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
Latest Articles by Author
Latest Issues
PX automatic conversion to REM error  <style>html {   font-size: calc(100vw / 3.75);      }...
From 2024-04-16 09:34:16
0
0
4687
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
From 2024-04-06 20:22:15
0
1
454
How to use laravel components with livewire lazy placeholder I want to add the skeleton of my laravel component inside a livewire3 placeholder What I h...
From 2024-04-06 20:02:10
0
2
543
Top-level method to replace a string with HTML code (generated from an array) Given a string like this...$htmlPattern="Usernameis:#name#andusercompanyis#company#&q...
From 2024-04-06 17:40:41
0
2
410
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved