- A+
所属分类：Web前端
<!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>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <style> .box { /* 最外层可显示的高度 */ height: 200px; overflow: hidden; } .table { width: 600px } .thead, .tbody { position: relative; } .thead { z-index: 1; background: darkgray; } .tbody { z-index: 0; } </style> </head> <body> <div class="box"> <table class="table" border=1 cellspacing=0> <thead class="thead"> <tr> <th>序号</th> <th>名字</th> <th>年龄</th> <th>性别</th> <th>测试1</th> </tr> </thead> <tbody class="tbody"> </tbody> </table> </div> <script> // 加载数据 for (let i = 0; i < 20; i++) { var row = [ '<tr>', '<td title="' + i + 1 + '">' + i + 1 + '</td>', '<td>' + '名字' + i + '</td>', '<td>' + '年龄' + i + '</td>', '<td>' + '性别' + i + '</td>', '<td>' + '测试1--' + i + '</td>', '</tr>' ].join('') console.log(row) $('.box tbody').append(row) } startRoll(50) //50为时间 function startRoll(time) { let timer = null //默认初始值为自己本身的top let top = $(".tbody").css('top') let offsetTop = top.substring(0, top.indexOf('px')) startFun(time) function startFun(time) { timer = setInterval(() => { //比较数据的长度是否超过div的高度，没超过不开始轮播 if (!heightComparison()) { clearTimeout(timer) return false } offsetTop -= 1 let body_tbody = $("tbody") //定义 tbody为body_tbody let scrollHeight = body_tbody.find("tr").outerHeight(true); //获取 tr的高度 let tbodyTopPX = body_tbody.css('top'); // 获取tbody的top值 let tbodyTop = tbodyTopPX.substring(0, tbodyTopPX.indexOf('px')) body_tbody.css({ 'top': offsetTop + 'px' }) //改变tbody的top 令tbody向上移动 if (tbodyTop != 0 && parseInt(tbodyTop) % Math.ceil(scrollHeight) === 0) { // tbodyTop的top值是 tr高度的倍数时 将第一个tr移动到最后并让tbodyTop的top值减去tr的高度 body_tbody.find("tr:first").appendTo(body_tbody); offsetTop += scrollHeight body_tbody.css({ 'top': offsetTop + 'px' }) } }, time) } $(".box").mouseover(function () { // 鼠标移入 关闭轮播 clearTimeout(timer) }); $(".box").mouseout(function () { // 鼠标移出 重新开启轮播 startFun(time) }); } function heightComparison() { let divHeight = $(".box").height(); //最外层div的高度 用来比较数据的长度是否超过div的高度，没超过不开始轮播 let tbodyHeight = $(".tbody").height(); let tHeadHeight = $(".thead").height(); return tbodyHeight > divHeight - tHeadHeight } </script> </body> </html>
