HTML⽆缝滚动的表格
1、表格滚动效果
2、实现原理
1)、最外层是⼀个class为scrollBody的div，⾥⾯有8个ul（ABCDEFGH），每⾏是⼀个ul，ul⾥⾯是两个li，⽤div>ul>li这
种结构模拟表格。
2)、每个ul使⽤绝对定位的样式，每次触发定时器函数的时候，设置每个ul的位置。（并没有删除或者添加dom元素）
3)、最外成div的⾼度就是4个ul的⾼度，超出div的部分被隐藏了。
4)、⿏标移⼊div时，清除定时器，⿏标移除div时，再开启定时器。
3、完整demo
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<title></title>
<script src="code.jquery/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonym        <style type="text/css">
html滚动效果代码*{margin:0px;padding: 0px;}
html,body{height:100%;width:100%;position: relative;overflow: hidden;}
.scrollBody{height: 160px;position: relative;overflow: hidden;}
.scrollBody>ul{list-style: none;position: absolute;height: 40px;width: 100%;top: 160px;left: 0px;}
.scrollBody>ul:nth-child(odd){background: #286dad;}
.scrollBody>ul:nth-child(even) {background: #1c97ad;}
.scrollBody>ul>li{height: 40px;width: 50%;float: left;text-align: center;line-height: 40px;}
.scrollBody>ul:nth-child(1){top: 0;}
.scrollBody>ul:nth-child(2){top: 40px;}
.scrollBody>ul:nth-child(3){top: 80px;}
.scrollBody>ul:nth-child(4){top: 120px;}
</style>
</head>
<body>
<div class="scrollBody">
<ul><li>A</li><li>a</li></ul>
<ul><li>B</li><li>b</li></ul>
<ul><li>C</li><li>c</li></ul>
<ul><li>D</li><li>d</li></ul>
<ul><li>E</li><li>e</li></ul>
<ul><li>F</li><li>f</li></ul>
<ul><li>G</li><li>g</li></ul>
<ul><li>H</li><li>h</li></ul>
</div>
<script>
function scroll(className){
var uls = $("."+className+">ul");
var interval = 1200;
var rowHeight = 40;
var curIndex=0;
function  playScroll() {
for(var i=0;i<uls.length;i++){
for(var i=0;i<uls.length;i++){
if(i<curIndex){
uls.eq(i).stop(true).animate({top:(i-curIndex-1+uls.length)*rowHeight+'px'});                        }else if(i>curIndex){
uls.eq(i).stop(true).animate({top:(i-curIndex-1)*rowHeight+'px'});
}else{
uls.eq(i).stop(true).animate({top: -rowHeight},function(){
$(this).css({top:(uls.length-1)*rowHeight+'px'});
});
}
}
if(curIndex==uls.length-1){
curIndex=0
}else{
curIndex++
}
}
timer = setInterval(playScroll,interval);
$('.'+className).mouseenter(function () {
clearInterval(timer);
}).mouseleave(function () {
timer = setInterval(playScroll,interval);
});
}
scroll('scrollBody')
</script>
</body>
</html>
若是有参考价值，⿇烦给个赞 (^_−)☆

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