In project development, we often encounter the need to implement a scrolling list, so talk about the code that has been implemented, and extract it. If you encounter similar requirements later, you can follow the cat and draw the tiger.
code show as below
1. HTML page part
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GDP</title>
<link rel="stylesheet" href="${basePath}pages/gggl/layui/css/layui.css" media="all">
<link rel="stylesheet" type="text/css" href="${basePath}pages/k8/gggl/css/gdp.css"/>
</head>
<body style="">
<div class="contain">
<div class="content">
<ul>
<li>行政区</li>
<li>产业现值(亿元)</li>
<li>同比增速(%)</li>
</ul>
<div class="list">
<ul id="">
</ul>
</div>
</div>
</div>
</body>
<script src="${basePath}/plugins/jquery/jquery-3.3.1.min.js"></script>
<script src="${basePath}/pages/k8/gggl/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
var basePath = '${basePath}';
show();
//第五个图表
function show(){
// 表格渲染
$('.list ul').empty()
let dataArr = [{
"a":"黄浦区",
"b":439,
"c":3
},{
"a":"徐汇区",
"b":439,
"c":3
},{
"a":"长宁区",
"b":439,
"c":3
},{
"a":"静安区",
"b":439,
"c":3
},{
"a":"普陀区",
"b":439,
"c":3
},{
"a":"虹口区",
"b":439,
"c":3
},{
"a":"杨浦区",
"b":439,
"c":3
},{
"a":"闵行区",
"b":439,
"c":3
},{
"a":"宝山区",
"b":439,
"c":3
},{
"a":"嘉定区",
"b":439,
"c":3
},{
"a":"浦东新区",
"b":439,
"c":3
},{
"a":"金山区",
"b":439,
"c":3
},{
"a":"松江区",
"b":439,
"c":3
},{
"a":"青浦区",
"b":439,
"c":3
},{
"a":"奉贤区",
"b":439,
"c":3
}];
var no = 1;
for (var i in dataArr) {
let node = '<li id="'+dataArr[i].a+'">'
+'<span><div id='+no+' class="img2">'+no+'</div>'+dataArr[i].a+'</span>'
+'<span title="">'+dataArr[i].b+'</span>'
+'<span title=""><div class="img"></div>'+dataArr[i].c+'</span>'
+'</li>'
$('.list ul').append(node);
$('#黄浦区').addClass('huangpu');
if(no == 1){
$('#1').addClass('first');
}else if(no == 2){
$('#2').addClass('second');
}else if(no == 3){
$('#3').addClass('third');
}else{
$('#'+no).addClass('other');
}
no++;
}
// 表格超出滚动
Marquee({
name: 'list',
speedhq: 40
})
};
var MyMarhq;
function Marquee(opt){
clearInterval(MyMarhq);
let tagName = $('.'+opt.name);
let tblTop = 0;
let speedhq = opt.speed || 20;
let outerHeight = tagName.outerHeight();
let children_Height = tagName.children().height()
tagName.scrollTop(0)
if (children_Height > outerHeight) {
tagName.children().html(tagName.children().html() + tagName.children().html())
function Marqueehq(){
if(parseInt(tagName.scrollTop())>= children_Height){
tblTop = 0;
} else {
tblTop += 1;
}
tagName.scrollTop(tblTop)
}
MyMarhq = setInterval(Marqueehq,speedhq);
tagName.hover(function (){
clearInterval(MyMarhq);
},function (){
clearInterval(MyMarhq);
MyMarhq = setInterval(Marqueehq,speedhq);
})
}
}
</script>
</html>
2. CSS style
html,body{
font-family: "微软雅黑";
width: 1300px;
height: 1000px;
}
.contain {
width: 100%;
height: 100%;
color: #fff;
}
.contain > .content {
width: 99%;
height: 80%;
margin: 0 auto;
font-size: 60px;
margin-top: 10px;
}
.contain > .content > ul {
width: 100%;
height: 100px;
line-height: 100px;
display: flex;
align-items: center;
}
.contain > .content > ul li {
float: left;
text-align: center;
border-bottom: 2px solid rgba(73, 186, 220, 0.2);
color: #9df6f4;
}
.contain > .content .list {
width: 100%;
height: 100%;
cursor: pointer;
overflow-y: scroll;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
.contain > .content .list::-webkit-scrollbar {
width: 0px;
}
.contain > .content .list li {
width: 100%;
height: 100px;
line-height: 100px;
border-bottom: 2px solid rgba(73, 186, 220, 0.2);
}
.contain > .content .list li span {
display: inline-block;
height: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contain > .content > ul > li,
.contain > .content .list li span {
text-align: center;
}
.contain > .content > ul > li:first-child,
.contain > .content .list li span:first-child {
width: 31%;
}
.contain > .content > ul > li:nth-child(2),
.contain > .content .list li span:nth-child(2) {
width: 32%;
}
.contain > .content > ul > li:nth-child(3),
.contain > .content .list li span:nth-child(3) {
width: 33%;
}
.img{
position:relative;
width:20px;
height:100px;
float: left;
left: 135px;
top:48px;
background: url(../image/i_down.png) no-repeat;
}
.img2{
font-size:30px;
position:relative;
width:50px;
height:100px;
line-height:33px;
float: left;
left: 50px;
top:30px;
/*background: url(../image/i_first.png) no-repeat;
background-size:100%;*/
}
.first{
background: url(../image/i_first.png) no-repeat;
background-size:100%;
}
.second{
background: url(../image/i_second.png) no-repeat;
background-size:100%;
}
.third{
background: url(../image/i_third.png) no-repeat;
background-size:100%;
}
.other{
background: url(../image/i_other.png) no-repeat;
background-size:100%;
}
.huangpu{
background: url(../image/huangpu_bg.png) no-repeat;
background-size:100%;
}