HTML+JS实现列表循环滚动信息展示

原创

已于 2023-03-22 11:40:22 修改 · 2.4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2023-03-13 16:53:25 首次发布

请添加图片描述

<!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>
<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:300px;
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> <span>|</span>