这篇文章给大家分享的是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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Vue中的v-model基本用法是什么？v-model的修饰符有什么用？

  这篇文章给大家介绍的是关于Vue中的v-model的内容，下文有v-model的基本用法、v-model的修饰符等v-model相关的内容，感兴趣的朋友可以参考，那么接下来就跟随小编来学习一下吧。

• 用原生jQuery如何做Tab点击切换，具体代码是什么

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

• Vite创建项目的具体操作是什么

  随着 Vite2 的发布并日趋稳定，现在越来越多的项目开始尝试使用它。本文我们就介绍了Vite创建项目的实现步骤，感兴趣的可以了解一下

• JS表格隔行变色效果的实现方法及注意事项是什么

  本文实例为大家分享了JS实现表格隔行变色的具体代码，供大家参考，具体内容如下

• Vue中路由实现页面跳转不刷新怎么办，如何解决

  这篇文章主要介绍了Vue路由this.route.push跳转页面不刷新的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教