<!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>
|
<style>
|
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;
|
display: flex;
|
justify-content: space-around;
|
|
}
|
|
.scroll-table-head>li {
|
float: left;
|
border-right: 1px solid rgba(74, 137, 219, 0.36);
|
text-align: center;
|
height: 100%;
|
line-height: 42px;
|
width: auto;
|
flex-grow: 1
|
}
|
|
|
|
.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%;
|
}
|
</style>
|
</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>
|
<script>
|
/*列表滚动*/
|
$(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);
|
});
|
});
|
</script>
|
</body>
|
|
</html>
|
