html的li标签结合layui实现滚动列表
在项⽬开发中经常遇到需要实现⼀个滚动列表，所以讲已经实现好的代码，提炼出来，后期遇到类似需求可以照猫画虎代码如下
1、html页⾯部分
<!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 >
<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":"虹⼝区",
"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样式
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;
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: 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;
html滚动效果代码background-size:100%;
}
.huangpu{
background: url(../image/huangpu_bg.png) no-repeat;  background-size:100%;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。