今天小编跟大家讲解下有关“jQuery中用什么方法实现表格的滚动效果”的内容 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。

本文实例为大家分享了jquery实现表格无缝滚动的具体代码，供大家参考，具体内容如下

css部分我是用的弹性布局

*{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style:none;
        }
        .tableBox{
            width:500px;
            height:520px;
            background:#e8e8e8;
            margin:0 auto;
            overflow:hidden;
        }
        .slide-title{
            height:2.5rem;
            line-height:2.5rem;
            display:flex;
            background:#223e80;
            color:#fff;
            text-align:center;
        }
        .slide-title span{
            flex:1;
        }
        .slide-list li{
            line-height:1.875rem;
            height:1.875rem;
            display:flex;
        }
        .slide-list li span{
            flex:1;
            text-align:center;
        }
        .slide-list li.odd{
            background:rgba(0,0,0,.3)
        }

结构部分

<div class="tableBox">
    <div class="slide-title">
        <span>title1</span>
        <span>title2</span>
        <span>title3</span>
    </div>
    <div class="slide-container">
        <ul class="slide-list js-slide-list">
            <li class="odd"><span>item1</span><span>item1</span><span>item1</span></li>
            <li class="even"><span>item2</span><span>item2</span><span>item2</span></li>
            <li class="odd"><span>item3</span><span>item3</span><span>item3</span></li>
            <li class="even"><span>item4</span><span>item2</span><span>item2</span></li>
            <li class="odd"><span>item5</span><span>item3</span><span>item3</span></li>
            <li class="even"><span>item6</span><span>item2</span><span>item2</span></li>
            <li class="odd"><span>item7</span><span>item3</span><span>item3</span></li>
            <li class="even"><span>item8</span><span>item2</span><span>item2</span></li>
            <li class="odd"><span>item9</span><span>item3</span><span>item3</span></li>
            <li class="even"><span>item10</span><span>item2</span><span>item2</span></li>
            <li class="odd"><span>item11</span><span>item3</span><span>item3</span></li>
            <li class="even"><span>item12</span><span>item2</span><span>item2</span></li>
            <li class="odd"><span>item13</span><span>item3</span><span>item3</span></li>
            <li class="even"><span>item14</span><span>item2</span><span>item2</span></li>
            <li class="odd"><span>item15</span><span>item3</span><span>item3</span></li>
            <li class="even"><span>item16</span><span>item2</span><span>item2</span></li>
        </ul>
    </div>
</div>

最后就是关键部分，js部分

鼠标滑过时清除定时器的写法

$(function(){
    //鼠标滑过时清除定时器
    $(".slide-list").hover(function(){
        clearInterval(scrollTimer);
    },function(){
        scrollTimer=setInterval(function (){
            autoScroll(".slide-list")
        },2000);
    });
 
 
    function autoScroll(obj){
            var tableUl = $(obj);
            var first = tableUl.find('li:first');
            var height = first.height();
            first.animate({
                height:0
            },500,function(){
                first.css('height',height).appendTo(tableUl);
            })
    }
   var scrollTimer = setInterval(function(){
        autoScroll(".slide-list")
    },2000)
})

2、鼠标滑过时不清除定时器

$(function(){
    
    
    function autoScroll(obj){
            var tableUl = $(obj);
            var first = tableUl.find('li:first');
            var height = first.height();
            first.animate({
                height:0
            },500,function(){
                first.css('height',height).appendTo(tableUl);
            })
    }
   setInterval(function(){
        autoScroll(".slide-list")
    },2000)
})

实现的效果：

接口轮询调用的时候踩了一个坑，如果换成接口调用，一定要记得加上有没有定时器的判断

if(timer != null) {
    clearInterval(timer);
}

完整的代码如下

$(function(){
 
 
var allUrl = "http://localhost:8899/tv/alldata";
 
renderPage ();
 
 var timer = setInterval(function(){
    renderPage ()
},5000);
if(timer != null) {
    clearInterval(timer);
}
 
 
function renderPage () {
    console.log(111);
    $.ajax({
        url:allUrl,
        async:true,
        success:function(result){
          console.log(result);
          if(result.success === true){
              console.log('数据',result.data);
              var niujuOneData = result.data.counts[0].tvmTvToolUsageCount;
              var niujuTwoData = result.data.counts[1].tvmTvToolUsageCount;
              var niujuThreeData = result.data.counts[2].tvmTvToolUsageCount;
              var niujuFourData = result.data.counts[3].tvmTvToolUsageCount;
              var recordTableData = result.data.history;
              var useTableOneData = result.data.usage.needCheckTools;
              var useTableTwoData = result.data.usage.expireCheckTools;
              var useTableThreeData = result.data.usage.usingTools;
              console.log('数据1',niujuOneData)
 
              renderNiuju ('#banshouOne','#otherOne','#totalOne',niujuOneData);
              renderNiuju ('#banshouTwo','#otherTwo','#totalTwo',niujuTwoData);
              renderNiuju ('#banshouThree','#otherThree','#totalThree',niujuThreeData);
              renderNiuju ('#banshouFour','#otherFour','#totalFour',niujuFourData);
              renderRecordTable ('#tvTableFour',recordTableData);
              renderUseStateTable ('#tvTableOne',useTableOneData);
              renderUseStateTable ('#tvTableTwo',useTableTwoData);
              renderUseStateTable ('#tvTableThree',useTableThreeData);
          }
        }
    });
};
/**
 * 扭矩间数据渲染函数
 */
function renderNiuju (obj1,obj2,obj3,tableData) {
    var niujuWrenchString = '<div class="tq-niuju-title-item blue">'+tableData.torqueToolTotalCount+'</div>' +
        '<div class="tq-niuju-title-item purple">'+tableData.torqueToolUsingCount+'</div>' +
        '<div class="tq-niuju-title-item green">'+tableData.torqueToolAvailableCount+'</div>' +
        '<div class="tq-niuju-title-item red">'+tableData.torqueToolNeedCheckCount+'</div>'
    var orderToolString = '<div class="tq-niuju-title-item blue">'+tableData.otherToolTotalCount+'</div>' +
        '<div class="tq-niuju-title-item purple">'+tableData.otherToolUsingCount+'</div>' +
        '<div class="tq-niuju-title-item green">'+tableData.otherToolAvailableCount+'</div>' +
        '<div class="tq-niuju-title-item red">'+tableData.otherToolNeedCheckCount+'</div>'
    var toolTotalString = '<div class="tq-niuju-title-item blue">'+tableData.totalToolCount+'</div>' +
        '<div class="tq-niuju-title-item purple">'+tableData.totalToolUsingCount+'</div>' +
        '<div class="tq-niuju-title-item green">'+tableData.totalToolAvailableCount+'</div>' +
        '<div class="tq-niuju-title-item red">'+tableData.totalToolNeedCheckCount+'</div>'
 
    $(obj1).html(niujuWrenchString)
    $(obj2).html(orderToolString)
    $(obj3).html(toolTotalString)
 
}
 
/**
 *操作记录表格渲染函数
 */
function renderRecordTable (obj,tableData){
    var tableString = '';
    $.each(tableData,function(index,value){
        if(index % 2 == 0){
            tableString += ' <li class="odd">'+
                '<div class="tq-des">'+value.content+'</div>'+
                '<div class="tq-time">'+value.createTime+'</div>'+
                '</li>'
        }else{
            tableString +=  ' <li class="even">'+
                '<div class="tq-des">'+value.content+'</div>'+
                '<div class="tq-time">'+value.createTime+'</div>'+
                '</li>'
        }
    });
    $(obj).empty();
    $(obj).html(tableString);
}
 
function renderUseStateTable (obj,tableData){
    var tableString = '';
 
    $.each(tableData,function(index,value){
        if(index % 2 == 0){
            tableString += '<li class="odd">'+
                '<span>'+value.totalPositionEncoding+'</span><span>'+value.toolCode+'</span>'+
                '</li>'
        }else{
            tableString +=  '<li class="even">'+
                '<span>'+value.totalPositionEncoding+'</span><span>'+value.toolCode+'</span>'+
                '</li>'
        }
    })
 
    $(obj).html(tableString);
 
}
 
setInterval(function(){
    autoScroll("#tvTableOne")
    autoScroll("#tvTableTwo")
    autoScroll("#tvTableThree")
    autoScroll("#tvTableFour")
},2000)
 
function autoScroll(obj){
    var tableUl = $(obj);
    var first = tableUl.find('li:first');
    var height = first.height();
    first.animate({
        height:0
    },500,function(){
        first.css('height',height).appendTo(tableUl);
    })
}
 
 
});

以上就是关于“jQuery中用什么方法实现表格的滚动效果”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• js瀑布流布局是什么？怎样实现?

  瀑布流也叫做瀑布流式布局，是一种比较常见和流行的网站页面布局，视觉效果就是每行高度不同，表现为参差不齐的多栏布局。那么瀑布流式布局要怎样实现呢？下面给大家分享js实现瀑布流布局的3种方法。

• 小程序侧边栏切换效果的制作步骤及代码是什么

  这篇文章主要为大家详细介绍了小程序实现侧边栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JavaScript类型检测方法是什么，具体怎样做

  JavaScript是web前端广泛应用的语言之一，在网页应用制作、脚本制作、小程序等诸多领域具有不可替代的的地位。笔者学习了一端时间的前端，颇感JS知识点的繁碎，故将学习到的一些知识、思考和感悟记录下来。

• JS递归算法具体如何应用，递归是如何工作的

  递归是算法中一个重要的解法,因此,有必要单拎出来讲讲,所以下面这篇文章主要给大家介绍了关于JavaScript递归经典案例题的相关资料,需要的朋友可以参考下

• Vue中iview怎样做分页删、查的功能

  这篇文章主要为大家详细介绍了vue+iview实现分页及查询功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下