jquery无缝滚动代码(jQuery实现表格行数据滚动效果)
类别:编程学习 浏览量:2710
时间:2021-10-04 01:54:11 jquery无缝滚动代码
jQuery实现表格行数据滚动效果本文实例为大家分享了jQuery实现表格行数据滚动效果的具体代码,供大家参考,具体内容如下
HTML代码:
<li class="box"> <li class="box-header"> <li class="col">测试1</li> <li class="col">测试2</li> <li class="col">测试3</li> <li class="col">测试4</li> </li> <li id="font-scroll"> <li class="box-body"> <li class="row"> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> </li> <li class="row"> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> </li> <li class="row"> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> </li> <li class="row"> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> </li> <li class="row"> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> </li> <li class="row"> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> </li> <li class="row"> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> </li> <li class="row"> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> </li> <li class="row"> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> <li class="col">测试文字</li> </li> </li> </li> </li>
CSS样式代码:
.box { width: 400px; text-align: center; font-size: 14px; border: 1px solid rgba(0, 0, 0, .3); } .box .box-header { display: flex; justify-content: space-evenly; } .box-body .row { display: flex; justify-content: space-evenly; } .box-header, .box-body .row { border-bottom: 1px dashed #404040; } .box .col { padding: 10px 0 10px 0; } .box .col:nth-child(1) { width: 80px; } .box .col:nth-child(2) { width: 60px; } .box .col:nth-child(3) { width: 80px; } .box .col:nth-child(4) { width: 60px; } /* 内容滚动 */ #font-scroll { /* 内容滚动可视高度 */ height: 199px; overflow: hidden; }
JS代码:
(function ($) { $.fn.FontScroll = function (options) { let d = { time: 1000 } $.extend(d, options); // 需要滚动的li父盒子 let box = this[0] // 滚动间隔 let _time = d.time // 这个办法只适合每行数据的高度都相同的情况 // // 每次滚动的高度(一般是一条数据的高度) // let _contentChildHeight = box.children[0].children[0].offsetHeight // // 滚动总高度,即内容的总高度(所有数据的总高度) // let _contentTotalHeight = _contentChildHeight * box.children[0].children.length // 这种办法适合所有情况,包括每行数据的高度都不相同的情况 // 获取所有行元素 let all_row_el = box.children[0].children // 行总高度 let _contentTotalHeight = 0 // 每一行数据与前面所有行高度的叠加高度 let _contentChildHeight = [] for (let i in all_row_el) { if ((new RegExp("^\\d+$")).test(i)) { _itemHeight = all_row_el[i].offsetHeight _contentTotalHeight += _itemHeight i == 0 ? _contentChildHeight.push(_itemHeight) : _contentChildHeight.push(_contentChildHeight[i - 1] + _itemHeight) } } // 需要滚动的li子盒子 let child1 = this.children('.box-body') // 克隆出来滚动的li子盒子 // 克隆方法一 // let child1 = this.children('.box-body')[0] // let child2 = this.children('.box-body')[1] // child2.innerHTML = child1.innerHTML // 克隆方法二 if ((box.offsetHeight + 5) < _contentTotalHeight) { // 如果数据没有达到一定的高度,则不会执行滚动效果 child1.clone().insertAfter(child1) /*启动定时器*/ let timer = setInterval(autoScrollLine, 30) /*单行向上滚动效果*/ function autoScrollLine() { /*判断滚动内容是否已经滚完,滚完了则滚动的值重新设置到0 否则就每隔30毫秒向上滚动1px*/ if (box.scrollTop >= _contentTotalHeight) { box.scrollTop = 0; } else { box.scrollTop++; } /*判断滚动的距离刚好为一条數據的高度时停掉定时器, 隔 _time 之后重新启动定时器即可实现數據滚动停留效果 */ if (_contentChildHeight.indexOf(box.scrollTop) >= 0) { clearInterval(timer) setTimeout(() => { timer = setInterval(autoScrollLine, 30) }, _time) } } } } })(jQuery);
使用方法:
$('#font-scroll').FontScroll({ time: 1000 });
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- jQuery如何跳出each循环
- jQuery邮箱自动补全
- javascript中还原append代码(JS实现jQuery的append功能)
- jQuery给动态添加的元素绑定事件
- jQuery中height()、innerheight()、outerheight()的区别
- jQuery里$(this)和this的区别有哪些
- jQuery判断对象是否存在
- jquery filter方法
- jquery unbind
- jquery判断是否为数组
- jquery中find()与filter()的区别
- jQuery中$.each的用法
- jQuery如何操作下拉框select
- JQuery中serialize与serializeArray
- jquery遍历json字符串
- jquery中使用detach 移除元素
- 记忆中的台词(记忆中的台词)
- 袁冰妍轧戏 拍《琉璃》的同时还在拍《将夜》,难怪被骂演技差(拍琉璃的同时还在拍将夜)
- 刚红就耍大牌,《琉璃》角色滤镜碎一地,心疼工作人员(琉璃角色滤镜碎一地)
- 袁冰妍郑业成这对可以处,有脸红情话他们是真的敢说(袁冰妍郑业成这对可以处)
- 《祝卿好》台词又土又甜,就喜欢这么直接的恋爱(祝卿好台词又土又甜)
- 大女主 汤唯垂青电视圈,搭档朱亚文出演《大明皇妃孙若微传》(汤唯垂青电视圈)
热门推荐
- 微信小程序中的代码怎么编辑(微信小程序新手入门之自定义组件的使用)
- 实用的Visual Studio插件
- 最新版dedecms安全策略(DedeCMS站点高级安全策略Linux篇)
- 数据库mysql基本知识(深入理解r2dbc在mysql中的使用)
- sqlserver创建带参数的存储过程(SQLServer存储过程实现单条件分页)
- 宝塔mysql怎么设置优化(宝塔面板mysql内存占用高如何优化)
- 宝塔面板如何通过ip访问网站(宝塔面板301重定向使用教程)
- 停止mysql服务命令(windows下实现定时重启Apache与MySQL方法)
- js回调函数
- php和xml有什么关系(PHP创建XML的方法示例基于DOMDocument类及SimpleXMLElement类)