制作滚动表格
三个学习点：jQuery
用Vscode编写代码
滚动起来的两种思路
思路一： 准备两个相连的相同文本，文本滚动，当第一个文本滚动消失后，瞬间回到初始位置，重新滚动第一个文本。
思路一核心代码：
function scroll() {
// 第一个文本全部滚动完后，回到原位
if (tab2.offsetTop - box2.scrollTop <= 0) {
box2.scrollTop = 0;
}
// 第一个文本若没有全部滚动完，则继续滚动
else {
box2.scrollTop += 2;
}
// 滚动状态，滚动时为1，停止为0
scrollkey = 1;
}scrollTop：元素高度（200px）小于元素内容（300px）时
拉到最底下会有隐藏部分（100px）
scrollTop=100px
制作中遇到的问题和经验：
1.按钮部分
style="clear:both"
前面的元素浮动，使用这行代码可以不与之前平齐，不受前面后面元素的浮动影响
2.按钮居中
代码：
/* 设置按钮容器样式 */
#btn10 {
width: 700px;
margin: 0px auto;
}
/* 设置按钮居中 */
#btn20{
margin: 0px 260px;
}
/* 按钮样式 */
.btn{
width: 60px;
height: 50px;
float: left;（使按钮间无间隙）
}
<div id="btn10" style="clear:both">
<div id="btn20">
<button id="btn1" class="btn">开始</button>
<button id="btn2" class="btn">暂停</button>
<button id="btn3" class="btn">重置</button>
</div>
</div>给按钮部分一个大容器，里面装一个小容器，小容器里放三个按钮
大容器用margin: 0px auto;居中
小容器margin: 0px 260px;居中，这个时候就可以用具体数值设置居中
代码：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动表格</title>
<style>
/* 设置表格整体的宽度，居中，背景色 */
.box,
.box1,
.box2,
.tab1,
.tab2 {
width: 700px;
margin: 100px auto;
margin-bottom: 0px;
background-color: aliceblue;
}
/* 表格居中(去除上外边框影响) */
.box,
.box2,
.tab1,
.tab2 {
margin-top: 0px;
}
/* 表头样式 */
.box1 {
border-top: 1px black solid;
border-left: 1px black solid;
position: relative;
float: left;
/* border-right: 1px black solid; */
}
/* 表格容器样式 */
.box2 {
height: 456px;
overflow: hidden;
position: relative;
border-left: 1px black solid;
float: left;
/* border-right: 1px black solid; */
}
/* 文本一样式 */
.tab1 {
position: relative;
float: left;
}
/* 文本二样式 */
.tab2 {
position: relative;
float: left;/* 不浮动无法滚动 */
}
/* 设置按钮容器样式 */
#btn10 {
width: 700px;
margin: 0px auto;
}
/* 设置按钮居中 */
#btn20 {
margin: 0px 260px;
}
/* 按钮样式 */
.btn {
width: 60px;
height: 50px;
float: left; /* 去除按钮间隙 */
}
/* 文本每行样式 */
.box1 span,
.box2 span {
float: left;/* 浮动去除span间的间隙 */
border: 1px black solid;
text-align: center;
height: 55px; /* 垂直居中 */
line-height: 55px; /* 垂直居中 */
}
</style>
</head>
<body>
<div id="box" class="box">
<div id="box1" class="box1">
<div>
<span>编号</span>
<span>姓名</span>
<span>年龄</span>
<span>地址</span>
</div>
</div>
<div id="box2" class="box2">
<div id="tab1" class="tab1">
<div>
<span>0001</span>
<span>小兰</span>
<span>10</span>
<span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
</div>
<div>
<span style="clear:both">0002</span>
<span>园子</span>
<span>20</span>
<span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
</div>
<div>
<span>0003</span>
<span>张三</span>
<span>30</span>
<span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
</div>
<div>
<span>0004</span>
<span>李四</span>
<span>40</span>
<span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
</div>
<div>
<span>0005</span>
<span>王五</span>
<span>50</span>
<span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
</div>
<div>
<span>0006</span>
<span>王六</span>
<span>60</span>
<span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
</div>
<div>
<span>0007</span>
<span>吴七</span>
<span>70</span>
<span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
</div>
<div>
<span>0008</span>
<span>king</span>
<span>80</span>
<span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
</div>
<div>
<span>0009</span>
<span>queen</span>
<span>90</span>
<span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
</div>
<div>
<span>0010</span>
<span>Jack</span>
<span>100</span>
<span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
</div>
</div>
<div id="tab2" class="tab2">
<div>
<span>0001</span>
<span>小兰</span>
<span>10</span>
<span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
</div>
<div>
<span>0002</span>
<span>园子</span>
<span>20</span>
<span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
</div>
<div>
<span>0003</span>
<span>张三</span>
<span>30</span>
<span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
</div>
<div>
<span>0004</span>
<span>李四</span>
<span>40</span>
<span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
</div>
<div>
<span>0005</span>
<span>王五</span>
<span>50</span>
<span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
</div>
<div>
<span>0006</span>
<span>王六</span>
<span>60</span>
<span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
</div>
<div>
<span>0007</span>
<span>吴七</span>
<span>70</span>
<span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
</div>
<div>
<span>0008</span>
<span>king</span>
<span>80</span>
<span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
</div>
<div>
<span>0009</span>
<span>queen</span>
<span>90</span>
<span>本宇宙-室女座超本星系团-本星系团-银河系-猎户座旋臂</span>
</div>
<div>
<span>0010</span>
<span>Jack</span>
<span>100</span>
<span>银河系-猎户座旋臂-太阳系第三环总体位置</span>
</div>
</div>
</div>
</div>
<div id="btn10" style="clear:both">
<div id="btn20">
<button id="btn1" class="btn">开始</button>
<button id="btn2" class="btn">暂停</button>
<button id="btn3" class="btn">重置</button>
</div>
</div>
<script src="./jquery-1.12.3.js"></script>
<script>
// 修改每一列span的宽度
$('span:nth-child(1)').css('width', '80');
$('span:nth-child(2)').css('width', '80');
$('span:nth-child(3)').css('width', '80');
$('span:nth-child(4)').css('width', '452');
// 修改文本每一列span的字体颜色
$('#box2 span:nth-child(1)').css('color', 'rgba(112, 23, 23, 0.632)');
$('#box2 span:nth-child(2)').css('color', 'rgba(99, 23, 116, 0.732)');
$('#box2 span:nth-child(3)').css('color', 'rgba(67,43, 111, 0.581)');
$('#box2 span:nth-child(4)').css('color', 'rgba(0,0, 0, 0.9)');
/* 改变两个文本偶数行背景颜色 */
$('#tab1 div:nth-child(2n) span').css('background', 'blanchedalmond');
$('#tab2 div:nth-child(2n) span').css('background', 'blanchedalmond');
var timer;//计时器
// 滚动状态：表格滚动时scrollkey为1，静止时scrollkey为0
var scrollkey = 0;
// 点击状态：点击开始按钮后starkey为1，点击结束按钮时starkey为0
var starkey = 0;
// 滚动方法
function scroll() {
// 第一个文本全部滚动完后，两个文本回到原位
if (tab2.offsetTop - box2.scrollTop <= 0) {
box2.scrollTop = 0;
}
// 第一个文本没有全部滚动完，则继续滚动
else {
box2.scrollTop += 1;
}
// 滚动状态，滚动时为1，停止为0
scrollkey = 1;
}
// 点击开始按钮（btn1），表格开始滚动
$('#btn1').click(function () {
// 停止状态时点击开始按钮，才有对应的开始动作
if (starkey == 0 && scrollkey == 0) {
starkey = 1;
timer = setInterval(scroll, 10);
scrollkey = 1;
// 鼠标移入表格，表格停止滚动
box2.onmouseover = function () {
clearInterval(timer);
scrollkey = 0;
}
// 鼠标移出表格，表格开始滚动
box2.onmouseout = function () {
if (starkey == 1) {
timer = setInterval(scroll, 10);
scrollkey = 1;
}
}
}
})
// 点击暂停按钮（btn2），表格停止滚动
$('#btn2').click(function () {
clearInterval(timer);
scrollkey = 0;
starkey = 0;
})
// 点击重置按钮（btn3），表格回到最初状态且停止滚动
$('#btn3').click(function () {
clearInterval(timer);
box2.scrollTop = 0;
starkey = 0;
scrollkey = 0;
})
</script>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
