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 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样式

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%;
}

html的li标签结合layui实现滚动列表相关推荐

php中li标签,HTML li标签是干嘛的？HTML li标签用法和属性的介绍
HTML li标签是干嘛的?HTML li标签用法和属性的介绍都在这里,这篇文章给大家讲述的是HTML li标签的定义及属性介绍,还有html li标签如何去掉无序列表中的默认小点样式. HTML l ...
关于li标签之间的间隔如何消除！
问题:li标签用了display:inline之后虽然成功的合并在一行,但是li标签之间出现了间距. 原因:按enter键换行之后li标签之间存在着空格,正是这些空格占据了li标签之间的空间. 解决方 ...
html li标签横向排列_HTML简易的常用标签
介绍一下常用的HTML标签,mdn里面有但是都很拗口,今天就介绍几个常用的吧. 1 首先最最最常用的div标签,这个标签就是一个空的标签,是一个闭合标签.什么是闭合标签就是一对的. 例子//<d ...
HTML知识点总结之ul，ol，li标签
HTML列表分为有序列表,无序列表和描述列表.我们常用的是有序列表(ol)与无序列表(ul). 有序列表 <ol>标签就可以定义一个有序列表,之所以称其为有序列表,是因为可以使列表具有排序 ...
li标签行内元素高度及居中
<head> <title><title> <style type="text/css">*{padding: 0px;margin ...
li标签之间的空隙问题（转）
原文地址:http://www.cnblogs.com/laogao/archive/2012/08/13/2636419.html css li 空隙问题 IE6/7的Bug:纵向排列的li中加浮动 ...
鼠标悬停在li标签上时显示一个弹框_HTML标签——列表标签
列表使用场景: 内容相关.结构相似.样式相近的内容,根据内容的不同分为:无序列表.有序列表.定义列表无序列表:两个标签<ul>和<li>,是嵌套关系,快捷键ul>li ...
HTML li标签排列有空白间隙
原因:由于空格和回车键造成的: 解决方法: 1.注释掉空格以及回车键造成的空格,或者去掉空格,li标签挨着写如: <ul> <li>1</li><li> ...
js ul 清缓存_JavaScript使用ul中li标签实现删除效果
本文实例为大家分享了js使用ul中li标签实现删除效果的具体代码,供大家参考,具体内容如下 ul { list-style: none; } li { background-color: #ddd; ...

html的li标签结合layui实现滚动列表

html的li标签结合layui实现滚动列表相关推荐

最新文章

热门文章