jquery 增加表格(jquery实现表格无缝滚动)
类别:编程学习 浏览量:779
时间:2021-10-16 00:50:23 jquery 增加表格
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) }
结构部分
<li class="tableBox"> <li class="slide-title"> <span>title1</span> <span>title2</span> <span>title3</span> </li> <li 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> </li> </li>
最后就是关键部分,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 = '<li class="tq-niuju-title-item blue">'+tableData.torqueToolTotalCount+'</li>' + '<li class="tq-niuju-title-item purple">'+tableData.torqueToolUsingCount+'</li>' + '<li class="tq-niuju-title-item green">'+tableData.torqueToolAvailableCount+'</li>' + '<li class="tq-niuju-title-item red">'+tableData.torqueToolNeedCheckCount+'</li>' var orderToolString = '<li class="tq-niuju-title-item blue">'+tableData.otherToolTotalCount+'</li>' + '<li class="tq-niuju-title-item purple">'+tableData.otherToolUsingCount+'</li>' + '<li class="tq-niuju-title-item green">'+tableData.otherToolAvailableCount+'</li>' + '<li class="tq-niuju-title-item red">'+tableData.otherToolNeedCheckCount+'</li>' var toolTotalString = '<li class="tq-niuju-title-item blue">'+tableData.totalToolCount+'</li>' + '<li class="tq-niuju-title-item purple">'+tableData.totalToolUsingCount+'</li>' + '<li class="tq-niuju-title-item green">'+tableData.totalToolAvailableCount+'</li>' + '<li class="tq-niuju-title-item red">'+tableData.totalToolNeedCheckCount+'</li>' $(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">'+ '<li class="tq-des">'+value.content+'</li>'+ '<li class="tq-time">'+value.createTime+'</li>'+ '</li>' }else{ tableString += ' <li class="even">'+ '<li class="tq-des">'+value.content+'</li>'+ '<li class="tq-time">'+value.createTime+'</li>'+ '</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判断是否显示或隐藏
- css3设置过渡效果(CSS3 media queries + jQuery实现响应式导航)
- jquery 淡入淡出
- jQuery 右侧浮动导航菜单
- jquery的动画效果api(jQuery框架实现元素显示及隐藏三种动画方式)
- jquery中wrap、wrapAll、wrapInner
- jquery filter方法
- jquery留言板代码(JavaScript实现留言板添加删除留言)
- jquery实现页面滚动时自动加载内容
- jquery鼠标滑过显示提示框
- jquery中animate
- Jquery中parent()和parents()
- jquery判断是否为数组
- jQuery多个版本间,以及与其他js文件冲突的解决方法
- jQuery如何操作下拉框select
- jquery插件开发
- 记忆中的台词(记忆中的台词)
- 袁冰妍轧戏 拍《琉璃》的同时还在拍《将夜》,难怪被骂演技差(拍琉璃的同时还在拍将夜)
- 刚红就耍大牌,《琉璃》角色滤镜碎一地,心疼工作人员(琉璃角色滤镜碎一地)
- 袁冰妍郑业成这对可以处,有脸红情话他们是真的敢说(袁冰妍郑业成这对可以处)
- 《祝卿好》台词又土又甜,就喜欢这么直接的恋爱(祝卿好台词又土又甜)
- 大女主 汤唯垂青电视圈,搭档朱亚文出演《大明皇妃孙若微传》(汤唯垂青电视圈)
热门推荐
- dedecms自定义分页(详解DEDECMS缩略图标签[field:picname/]和[field:litpic/]的区别)
- vue实现双向绑定原理(vue实现双向数据绑定)
- mysql 高级用法(MySQL实现replace函数的几种实用场景)
- css中的background:transparent的作用
- python将字符串转换为时间格式(Python时间和字符串转换操作实例分析)
- 了解mysql数据自动备份(MySQL数据备份方法的选择与思考)
- mysql数值类型图解(详解mysql持久化统计信息)
- python爬微信好友(python抓取需要扫微信登陆页面)
- php中字符串反转的函数(php常用字符串查找函数strstr与strpos实例分析)
- 图解ftp服务器搭建(三分钟配置一个FTP服务器)