HTML+CSS+JavaScript to achieve list loop scrolling example code

HTML+CSS+JavaScript to achieve list loop scrolling example code
Description: Set a timer to replace the content of the previous node within the specified time.
1. Key code: javascript:

Copy code
The code is as follows:

<script type="text/javascript">
var dome = document.getElementById ("dome"); //Get the node
var dome1 = document.getElementById("dome1");
var dome2 = document.getElementById("dome2");
var speed=50; //Set the speed of upward rotation
dome2.innerHTML=dome1.innerHTML; //Copy node key statements
function moveTop(){
if(dome1.offsetHeight-dome.scrollTop<=0){//Judge whether the content has been cycled for the first time
dome.scrollTop=0;
}else{
dome.scrollTop++; //Otherwise move up
}
}
var myFunction=setInterval("moveTop()",speed);//Set the timer
dome.onmouseover=function(){//Mouse stops when placed in the area
clearInterval(myFunction);
}
dome.onmouseout=function(){
myFunction=setInterval(moveTop,speed);
}
</script>

2. Code example: complete code (runnable)

Copy code
The code is as follows:

<!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>Circular scrolling information bar</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#express li{
height:25px;
border-bottom:dashed 1px #999;
line-height:20px;
font-size:12px;
list-style:none;
}
#dome{
height:305px;
overflow:hidden;
margin-top:0px;
}
#book_class{
width:200px;
height:310px;
border:3px solid #999;
margin-left:auto;
margin-right:auto;
margin-top:70px;
border-radius:5px 5px 5px 5px;
box-shadow:0px 0px 10px 10px #CECED1;
}
#express{
margin-left:-30px;
margin-right:10px;
margin-bottom:0px;
margin-top:0px;
}
#book_class div div ul li a{
text-decoration:none;
color:#333333;
}
#book_class div div ul li a:hover{
text-decoration:underline;
}
</style>
</head>
<body>
<div id="book_class">
<div id="dome">
<div id="dome1">
<ul id="express">
<li><a href="#">·2010 Postgraduate English Syllabus Arrived 25% Off...</a></li>
<li><a href="#">·Authoritative version of the Four Great Classics (People's Literature...</a></li>
<li><a href="#">·Mr. Tang Degang, an authority on oral history...</a></li>
<li><a href="#">·Yuan Weimin and the Sports World: Telling the Truth...</a></li>
<li><a href="#">·We in Taiwan in recent years: making a sensation on both sides of the Taiwan Strait...</a></li>
<li><a href="#">· Best-selling teaching aids recommended: 50 sets of exquisite books...</a></li>
<li><a href="#">·2010 Edition of the Joint Examination Outline for Master of Laws 75...</a></li>
<li><a href="#">· 25% off on new and best-selling computer books</a></li>
<li><a href="#">·Children's favorite books in 2009</a></li>
<li><a href="#">·59% off on the selected works of Freud</a></li>
<!---------Just copy the <li> tag more------I won’t write more here---------->
</div>
<div id="dome2"></div>
</div>
</div>
<!----------To prevent HTML from loading completely, write the javascript code below---------->
<script type="text/javascript">
var dome = document.getElementById("dome");
var dome1 = document.getElementById("dome1");
var dome2 = document.getElementById("dome2");
var speed=50; //Set the speed of upward rotation
dome2.innerHTML=dome1.innerHTML; //Copy node
function moveTop(){
if(dome1.offsetHeight-dome.scrollTop<=0){
dome.scrollTop=0;
}else{
dome.scrollTop++;
}
}
var myFunction = setInterval("moveTop()",speed);
dome.onmouseover=function(){
clearInterval(myFunction);
}
dome.onmouseout=function(){
myFunction=setInterval(moveTop,speed);
}
</script>
</body>
</html>

3. The interface is as follows:

<<:  The IE environment stipulates that the div height must be greater than the font height

>>:  HTML+CSS+JavaScript to create a simple tic-tac-toe game

Recommend

A simple method to implement scheduled backup of MySQL database in Linux

Here are the detailed steps: 1. Check the disk sp...

Pitfalls encountered when installing the decompressed version of MySQL 5.7.20 (recommended)

MySQL official website: https://www.mysql.com/dow...

Chinese and English font name comparison table (including Founder and Arphic)

In CSS files, we often see some font names become...

How does Vue solve the cross-domain problem of axios request front end

Table of contents Preface 1. Why do cross-domain ...

Solve the problem of not being able to access the RabbitMQ management page in the Linux server

Because a certain function of my project requires...

25 Ways and Tips to Increase Web Page Loading Speed

Introduction <br />Not everyone has access t...

Diving into JS inheritance

Table of contents Preface Prepare Summarize n way...

Vue implements the requirement of dragging and dropping dynamically generated components

Table of contents Product Requirements Ideas Prob...

Alibaba Cloud Ubuntu 16.04 builds IPSec service

Introduction to IPSec IPSec (Internet Protocol Se...

Vue implements small notepad function

This article example shares the specific code of ...

Vue Element front-end application development: Use of API Store View in Vuex

Table of contents Overview 1. Separation of front...

Explaining immutable values ​​in React

Table of contents What are immutable values? Why ...

Ideas and practice of multi-language solution for Vue.js front-end project

Table of contents 1. What content usually needs t...

JavaScript form validation example

HTML forms are commonly used to collect user info...

Who is a User Experience Designer?

Scary, isn't it! Translation in the picture: ...