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

How to start a Vue.js project

Table of contents 1. Node.js and Vue 2. Run the f...

Solution to the Mysql ERROR 1045 (28000): Access denied for user root@localhost problem in Ubuntu system

First way: skip-grant-tables: Very useful mysql s...

Implementation code for automatically adapting the width of the web page to the width of the mobile phone screen (viewport)

The general way of writing is as follows: XML/HTM...

mysql 5.7.18 winx64 free installation configuration method

1. Download 2. Decompression 3. Add the path envi...

Detailed explanation of HTML basic tags and structures

1. HTML Overview 1.HTML: Hypertext Markup Languag...

Solve the problem of secure_file_priv null

Add secure_file_priv = ' '； then run cmd ...

Graphic tutorial on installing tomcat8 on centos7.X Linux system

1. Create the tomcat installation path mkdir /usr...

The difference and usage of datetime and timestamp in MySQL

1. How to represent the current time in MySQL? In...

How to safely shut down a MySQL instance

This article analyzes the process of shutting dow...

Use of Linux relative and absolute paths

01. Overview Absolute paths and relative paths ar...

Detailed explanation of gcc command usage under Linux system

Table of contents 1. Preprocessing 2. Compilation...

A brief discussion on the design of Tomcat multi-layer container

Table of contents Container Hierarchy The process...

Detailed explanation of the idea of ​​xshell remote login to CentOS7 without password login

First, let me talk about the general idea: 1. Log...

WeChat applet realizes chat room function

This article shares the specific code of WeChat a...

Vue Element-ui table realizes tree structure table

This article shares the specific code of Element-...