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中的offset()和position()的区别
- jquery如何实现倒计时
- jquery弹出窗口过渡效果(jQuery实现大屏滚动播放效果)
- jquery如何优化
- jquery使用data缓存数据
- jQuery中height()、innerheight()、outerheight()的区别
- jQuery多个版本间,以及与其他js文件冲突的解决方法
- 2014-8-31
- 介绍几个jQuery实用函数
- jquery中prop和attr的区别
- jquery.ajax error 如何调试错误
- javascript和jquery的区别详解(JavaScript与JQuery框架基础入门教程)
- jquery中unbind、bind
- jquery鼠标滑过显示提示框
- Uncaught TypeError: jQuery.handleError is not a function
- jquery 选择器的用法
- 会 吃人 的客机 从天堂到地狱只需5分钟,图-104如何做到(会吃人的客机)
- 男人犯的错,为什么要女人来承担(为什么要女人来承担)
- 心理学 四个金蟾,哪个最招财 测你今生的运势有多棒(心理学四个金蟾)
- 吉善缘《聚宝金蟾》金蟾招财摆件 三足全铜蟾蜍客厅店铺开业礼品(吉善缘聚宝金蟾金蟾招财摆件)
- 招财化煞神兽,金蟾变了(招财化煞神兽金蟾变了)
- 26岁杨紫的白素贞遇上24岁鞠婧祎,哪个最美(26岁杨紫的白素贞遇上24岁鞠婧祎)
热门推荐
- pythonweb大数据分析(Python实现的大数据分析操作系统日志功能示例)
- bootstraptable使用教程(bootstrap Table的使用方法总结)
- dedecms怎样查看网页源文件(dedecms批量更新静态时提示:没有该栏目数据 可能缓存的解决方法)
- sqlserver2019使用教程图文(SQLServer2019 数据库环境搭建与使用的实现)
- dede的数据库在哪(dede后台Fatal error: Allowed memory size of 8388608 bytes exhausted问题的解决方)
- php递归实现(PHP递归统计系统中代码行数)
- js中alert相关知识点(js中getBoundingClientRect 方法案例详解)
- javascript取下拉框显示值(JavaScript offset实现鼠标坐标获取和窗口内模块拖动)
- django怎么创建模板文件(django模板加载静态文件的方法步骤)
- sql server修改表的字段类型后,不能保存