HTML uses marquee to achieve text scrolling left and right

HTML uses marquee to achieve text scrolling left and right

Copy code
The code is as follows:

<BODY>
//With the help of marquee
<MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100">
<SPAN unselectable="on">Here is the content to scroll</SPAN>
</MARQUEE>

//Ordinary implementation method
<DIV id="scrollobj" style="white-space:nowrap;overflow:hidden;width:500px;">
<span>Here is the content to scroll</span>
</DIV>
<script language="javascript" type="text/javascript">
function scroll(obj) {
var tmp = (obj.scrollLeft)++;
//When the scroll bar reaches the top right
if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML;
//When the scroll bar scrolls the width of the initial content, the scroll bar returns to the leftmost end
if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0;
}
setInterval("scroll(document.getElementById('scrollobj'))",20);
</script>
</BODY>

<<:  A practical record of an accident caused by MySQL startup

>>:  VUE render function usage and detailed explanation

Recommend

ReactJs Basics Tutorial - Essential Edition

Table of contents 1. Introduction to ReactJS 2. U...

ElementUI component el-dropdown (pitfall)

Select and change: click to display the current v...

Let's talk about what JavaScript's URL object is

Table of contents Overview Hash Properties Host p...

How to get the width and height of the image in WeChat applet

origin Recently, I am working on requirement A, i...

How to use Docker buildx to build multi-platform images and push them to private repositories

Introduction Recently I found that there is an AR...

A great collection of web standards learning resources

These specifications are designed to allow for bac...

The easiest way to install MySQL 5.7.20 using yum in CentOS 7

The default database of CentOS7 is mariadb, but m...

Spring Boot layered packaging Docker image practice and analysis (recommended)

Table of contents 1. Prepare the springboot proje...

How to prevent website content from being included in search engines

Usually the goal of building a website is to have...

How to write configuration files and use MyBatis simply

How to write configuration files and use MyBatis ...

WeChat applet implements SMS login in action

Table of contents 1. Interface effect preview 2.u...

Diagram of the Hyperledger Fabric 1.4 environment construction process under Windows 10

ContentsHyperledger fabric1.4 environment setup u...

WeChat applet implements form verification

WeChat applet form validation, for your reference...

HTML tutorial, easy to learn HTML language (2)

*******************Introduction to HTML language (...

Analysis of JavaScript's event loop mechanism

Table of contents Preface: 1. Reasons for the eve...