原生js实现表格循环滚动

2024-10-03 08:30:35

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

css

table{width: 500px;border: 1px solid gray;border-collapse: collapse;}
th,td{line-height: 35px;border: 1px solid gray;text-align: center;width: 120px;}
.scroll-box{height: 280px;width: 500px;overflow: hidden;position: relative;}
.tab-scroll{position: absolute;left: 0;top: 0;border-top: none;}
.tab-scroll td{border-top: none;}

html布局

<table class="top">
 <thead>
 <tr>
 <th>ID</th>
 <th>姓名</th>
 <th>年龄</th>
 <th>住址</th>
 </tr>
 </thead>
 </table>
 <div class="scroll-box">
 <table class="tab-scroll">
 <tbody>
 <tr>
 <td>1001</td>
 <td>李四</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1002</td>
 <td>王五</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1003</td>
 <td>王五</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1004</td>
 <td>Jack</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1005</td>
 <td>小兰</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1006</td>
 <td>王五</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1007</td>
 <td>王五</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1008</td>
 <td>Jack</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1009</td>
 <td>小兰</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 </tbody>
 </table>
</div>

js代码

var sTab = document.getElementsByClassName('tab-scroll')[0];//要滚动的表
 var tbody = sTab.getElementsByTagName('tbody')[0];//要滚动表格的内容
 sTab.appendChild(tbody.cloneNode(true));//追加一次滚动内容,以防滚动后可视区域无内容
 var speed = sTab.getElementsByTagName('td')[0].offsetHeight+3;//每次滚动的距离
 var tbdh = tbody.offsetHeight+1;//整个表的高度,是因为上边的边不算滚动

 function scrollTop() {
 var t = sTab.offsetTop;//获取要滚动表的位置
 if (-tbdh == t) {//比较 滚动的距离等于整个表的高度 即第一个表完全看不见
 sTab.style.transition = '0s';//过渡动画设为0秒
 sTab.style.top = 0;//位置设为初始位置
 scrollTop();//因为偷梁换柱消耗了一次过程,所以把这一次过程补回来
 }else{
 sTab.style.transition = '1s';
 sTab.style.top = t - speed + 'px';
 }
 }
setInterval(scrollTop, 1000);

解析思路图

然后滚动....

偷偷改到初始的位置(也就是:不用过渡动画把top改为0,改后恢复正常过渡动画滚动)

一些轮播图也可以用这个思路(我才不会告诉你,,其实这个思路就是从轮播图得来的),想看轮播图思路的把上面思路图转动90°就OK了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于JavaScript实现表格滚动分页

本文实例为大家分享了js实现表格滚动分页展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h
jsp中实现带滚动条的table表格实例代码

如下所示: <div style="width:700px; height:225px; overflow:auto;"> <table border="1" width="100%" cellpadding="0" cellspacing="0"> <tr> <td width="3%">0</td> <td width
jsp中为表格添加水平滚动条的实现方法

首先,本项目中使用的是bootstrap框架,因此有些人会说,给表格设置自适应属性就可以了这里要申明的是 bootsrtap自适应是针对当浏览器不占满整个屏幕,而是一半的时候才会出现横向的滚动条而当我们将浏览器最大化的时候,如果列数增多了呢?会出现什么效果答案就是会出现挤压的效果,横向并不会出现滚动条查看网上的教程,很多人都说将什么父div设置100%,table添加scrool属性均不可这里,解决的方法很简单,设置<th>标签的属性即可,让其不要自动换行 $(document).r
JS实现table表格固定表头且表头随横向滚动而滚动

先看一张效果图思路: 1.头部用一个table并用一个div包裹着, 表格的具体内容用一个table 2.头部外面的div用positon: relative相对定位 3.获取整个表格的高度 4.获取表格的dom(或者包裹着表格的dom)距离页面顶部的距离 offsetTop 5.滚动的零界点的距离表格的高度+表格距离页面顶部的距离如果滚动超过这个就让头部的top值归0或原封不动当然还有很多可以优化的地方我只是展示一个小思路嘿嘿嘿题外话为啥用红色表头因为显眼哇哈哈 JS代码
jsp中为表格添加水平滚动条的方法

首先,本项目中使用的是bootstrap框架,因此有些人会说,给表格设置自适应属性就可以了这里要申明的是 bootsrtap自适应是针对当浏览器不占满整个屏幕,而是一半的时候才会出现横向的滚动条而当我们将浏览器最大化的时候,如果列数增多了呢?会出现什么效果答案就是会出现挤压的效果,横向并不会出现滚动条查看网上的教程,很多人都说将什么父div设置100%,table添加scrool属性均不可这里,解决的方法很简单,设置<th>标签的属性即可,让其不要自动换行 $(document).r
javascript 带有滚动条的表格,标题固定,带排序功能.

复制代码代码如下: //使用要求: //1.将表格的Class命名为:sorttableHold, //2.表格放置在一个div中,此div设有overflow属性. //3.表格要求有ID,div要求有ID //4.要有JQuery.min.js文件 //5.OK. addEvent(window, "load", sortables_init); var SORT_COLUMN_INDEX; function sortables_init() { // Find all tabl
原生js实现表格循环滚动

本文实例为大家分享了js实现表格循环滚动的具体代码,供大家参考,具体内容如下 css table{width: 500px;border: 1px solid gray;border-collapse: collapse;} th,td{line-height: 35px;border: 1px solid gray;text-align: center;width: 120px;} .scroll-box{height: 280px;width: 500px;overflow: hidden;
分别用marquee和div+js实现首尾相连循环滚动效果，仅3行代码

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>分别用marquee
原生JS实现图片无缝滚动方法(附带封装的运动框架)

话说轮播图效果是前端er学习JS的必经之路啊,很多同学写的第一个JS效果应该就是它了,在各大网站我们都会经常见到,但是无缝滚动运动效果的轮播图,对于小白们来说还是有一定难度的. 我们来看看思路吧~ 首先我们要实现的效果有以下几点: 小圆点:点击小圆点显示与之对应的图片向左和向右按钮:点击向左按钮图片向后运动,点击向右按钮图片向前运动定时器:每隔 2s 自动播放主要难点在于: 当图片运动到最后一张,点击向右的按钮时,应该显示第一张: 当前显示的是第一张,点击向左的按钮时,应该显示最后一张:
10行原生JS实现文字无缝滚动(超简单)

废话不多说,直接上代码 <section class="pro_quota_tip"> <div class="tip_box"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external
利用原生js模拟直播弹幕滚动效果

目录 1.基本原理 2.具体代码总结 1.基本原理首先将直播区域分成十份(我个人自己为了便于计算分成十份),将输入的内容随机放到分成的十份区域中,插入到十份区域右边的视图之外,然后调用动画,按照随机的速度从右向左移动,当移动到左侧区域视图之外移除此滚动元素. 2.具体代码 <div class="move_video_content"> <div class="video_content"> <div class="vid
js实现列表循环滚动

本文实例为大家分享了js实现文字无缝轮播的具体代码,供大家参考,具体内容如下先介绍几个属性 clientHeight 元素的高度 clientTop 元素顶部边框的宽度 scrollTop 滚动条遮挡的部分的高度(包含border) scrollHeight 整个内容的高度(包含border) offsetTop 距离上一个 position 不为 static(默认) 的元素的顶部内边框的距离 <!DOCTYPE html> <html lang="en">
js实现无缝循环滚动

本文实例为大家分享了js无缝循环滚动实现代码,供大家参考,具体内容如下 1.图片格式:260*400. 2.使用循环定时器轻松实现 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> </head> <style type="text/css"&
原生js实现表格翻页和跳转

本文实例为大家分享了js实现表格翻页和跳转的具体代码,供大家参考,具体内容如下 js代码里的row_num变量是显示数据的行数,修改后可改变每页显示的数量. html代码: <table border="" cellspacing="" cellpadding="" id="table"> <thead> <tr> <td>No</td> <td>Name
原生js实现无限循环轮播图效果

知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px
原生JS实现目录滚动特效

分享一个用原生JS实现的文字滚动效果,这种效果通常用在网页中一些局部展示信息,如新闻.动态.充值记录等,效果如下: 实现代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现目录滚动特效</title> <s

原生js实现表格循环滚动

相关推荐

随机推荐