需求背景

在一些大屏首页展示上，通常会有一些表格展示，由于大屏的特殊性，不会有人专门去操作这个页面查看相应数据，一般都会采用动态滚动的效果。下面是具体的实现。

效果图

实现思路

通过<ul>和<li>标签模拟表格的表头、表身；
给最开始显示的几行数据设置样式，主要是设置其{top: }属性值；
通过setInterval方法动态改变要显示行的top属性值;
判断是否已到最后一行，若是，则再次循环。

示例代码

index.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表格动态滚动效果</title><link rel="stylesheet" type="text/css" href="css/style.css" /><script type="text/javascript" src="js/jquery-2.1.1.min.js"></script><script type="text/javascript" src="js/index.js"></script>
</head><body><div class="scroll-table"><ul class="scroll-table-head"><li>学号</li><li>姓名</li><li>成绩</li></ul><div class="scroll-table-body"><div class="scroll-table-body-inner"><ul class="scroll-table-body-row-1"><li><div>1</div></li><li>大牛</li><li><span>50</span></li></ul><ul class="scroll-table-body-row-2"><li><div>2</div></li><li>二狗</li><li><span>90</span></li></ul><ul class="scroll-table-body-row-3"><li><div>3</div></li><li>三毛</li><li><span>78</span></li></ul><ul><li><div>4</div></li><li>四角</li><li><span>89</span></li></ul><ul><li><div>5</div></li><li>五娃</li><li><span>76</span></li></ul><ul><li><div>6</div></li><li>六孩</li><li><span>100</span></li></ul></div></div></div>
</body></html>

index.js

/*列表滚动*/
$(function(){var scrollIndex = 0;var scrollIndex1 = 1;var scrollIndex2 = 2;var scrollIndex3 = 3;var scrolltimer = null;var scrollimgs = $(".scroll-table-body-inner>ul");var scrolltime = 1500;var scrollplayNum = scrollimgs.length - 1;function  moveTop() {scrollimgs.eq(scrollIndex).stop(true).animate({top: '-33%'},function(){$(this).css({top:"100%"});});scrollimgs.eq(scrollIndex1).stop(true).animate({top: 0});scrollimgs.eq(scrollIndex2).stop(true).animate({top: '33%'});scrollimgs.eq(scrollIndex3).stop(true).animate({top: '66%'});scrollimgs.removeClass();}function autoPlay() {if(scrollIndex > scrollplayNum) {scrollIndex = 0;}if(scrollIndex1 > scrollplayNum) {scrollIndex1 = 0;}if(scrollIndex2 > scrollplayNum) {scrollIndex2 = 0;}if(scrollIndex3 > scrollplayNum) {scrollIndex3 = 0;}moveTop();scrollIndex++;scrollIndex1++;scrollIndex2++;scrollIndex3++;}scrolltimer = setInterval(autoPlay,scrolltime);$(".scroll-table-body").mouseenter(function () {clearInterval(scrolltimer);}).mouseleave(function () {scrolltimer = setInterval(autoPlay,scrolltime);});
});

style.css

body,ol,ul{margin:0;padding:0;font-weight: normal;}
*{box-sizing: border-box;}
html,body{height: 100%;width: 100%;position: relative;overflow: auto;background: #0C192C;
}
ul>li{list-style: none;
}
.scroll-table{width: 382px;margin: 17px auto 25px auto;height: 216px;
}
.scroll-table-head{height: 44px;border: 1px solid rgba(74,137,219,0.36);width: 100%;font-size: 16px;color: #D1E7FF;font-weight: bold;
}
.scroll-table-head>li{float: left;border-right: 1px solid rgba(74,137,219,0.36);text-align: center;height: 100%;line-height: 42px;
}
.scroll-table-head>li:first-child{width: 104px;
}
.scroll-table-head>li:nth-child(2){width: 165px;
}
.scroll-table-head>li:last-child{width: calc(100% - 269px);border: 0;
}
.scroll-table-body{height: calc(100% - 44px);width: 100%;border: 1px solid rgba(74,137,219,0.36);border-top: 0;overflow: hidden;
}
.scroll-table-body-inner{position: relative;height: 100%;width: 100%;
}
.scroll-table-body-inner>ul:nth-child(odd){background: rgba(255,255,255,0.08);
}
.scroll-table-body-inner>ul{height: 33%;line-height: 48px;border-bottom: 1px solid rgba(74,137,219,0.36);overflow: hidden;position: absolute;left: 0;width: 100%;top: 100%;
}
.scroll-table-body-inner>ul>li{font-size: 16px;color: #FFFFFF;height: 100%;float: left;text-align: center;
}
.scroll-table-body-inner>ul>li:first-child{width: 103px;
}
.scroll-table-body-inner>ul>li:nth-child(2){width: 166px;
}
.scroll-table-body-inner>ul>li:last-child{width: calc(100% - 269px);
}
.scroll-table-body-inner>ul.scroll-table-body-row-1{top: 0;
}
.scroll-table-body-inner>ul.scroll-table-body-row-2{top: 33%;
}
.scroll-table-body-inner>ul.scroll-table-body-row-3{top: 66%;
}

源码地址：https://download.csdn.net/download/wml00000/11158979

实现类似表格内容动态滚动效果相关推荐

element UI 表格做下滑滚动效果，请求接口数据
element UI 表格做下滑滚动效果,请求接口数据,内容记录 import { ElMessage } from "element-plus"; // vue3.0 引入方式/ ...
html怎么筛选表格列,css3表格内容排序筛选效果
特效描述:css3 表格内容排序筛选效果,css3表格内容排序筛选效果代码结构 1. HTML代码 NFL 2001 Offensive StatsRankTeamGmsYdsYds/GRuYds ...
html table表格无缝向上滚动效果,js实现表格无缝滚动效果
table表格无缝向上滚动 height: 500px; overflow: hidden; position: relative; width: 1000px; margin: 100px auto ...
Xamarin效果第五篇之ScrollView动态滚动效果
前面基于Xamarin做了一点效果;这不过年从老家回来一直成沉迷工作无法自拔,没时间来更新文章了;今天赶紧抽点时间再来更新一下效果;直接看看最终实现的效果: 前台RadioButton的事件绑定选中状 ...
Vue Element table表格实现表格数据动态滚动（无限滚动）
效果 QQ录屏绑定鼠标事件 (实现鼠标进入和出去的时候数据是否滚动)(也可以不写,看自己需求) 滚动方法 :
Js实现数字动态滚动效果
生成gif后有点卡顿,实际上是很流畅的. 完整代码如下 DOM <!DOCTYPE html> <html> <head><title></tit ...
python 滚动字幕_python 实现字幕动态滚动和等待效果
晚上看了些python实现动态字幕效果的文章,总会提到print函数的flush=True参数,还有os.system('cls')清屏,总是迷糊,并不能实现滚动屏幕效果.经过多方思索和查找,总结如下 ...
element表格组件，内容自动滚动（并可设置）
最近项目有个需求,两个表格,定时自动切换,而且每个表格内容自动滚动,还要加个设置功能,可以设置两个表格之前自动切换的间隔时间,和滚动速度,大概效果如下话不多说,直接上代码主要的功能方法 autoR ...
Uni-app实现表格数据自动滚动(无限滚动)
需求:实现表格数据自动(无限)滚动(排除使用删除数组第一条数据添加到最后面的方法) uniapp自带的table组件和插件市场中的插件都不能使用(因为uniapp无法操作原生DOM元素),因此,实现表 ...

实现类似表格内容动态滚动效果

文章目录

需求背景

效果图

实现思路

示例代码

实现类似表格内容动态滚动效果相关推荐

最新文章

热门文章