HTMLl数据列表无限由下到上的滚动示例

最新推荐文章于 2023-12-07 11:03:23 发布
最新推荐文章于 2023-12-07 11:03:23 发布
阅读量256 收藏
点赞数 1
文章标签： 数据无限滚动 Marquee html JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34334055/article/details/87876494
版权

微信打赏：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >  
<html>  
<head>  
<title>table内容连续滚动</title>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<style type="text/css">  
* {padding: 0; margin: 0};  
td {height: 28px;};  
</style>  
</head>  
<body bgcolor="#FFFFFF">  
<div style="padding-top: 100px;">  
<table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="4FBFF9">  
    <tr>  
        <td width="120" align="center">业务流水号</td>  
        <td width="130" align="center">业务名称</td>  
        <td width="150" align="center">申请企业名称</td>  
        <td width="100" align="center">申报日期</td>  
        <td width="100" align="center">办理状态</td>  
    </tr>  
</table>  
</div>  
<div id="demo" style="overflow: hidden; height: 240;">  
    <div id="demo1">  
        <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="4FBFF9">  
            <tr>  
                <td width="120" align="center">201404020001</td>  
                <td width="130">测试业务</td>  
                <td width="150">申请企业名称</td>  
                <td width="100" align="center">2014-03-13</td>  
                <td width="100" align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020002</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020003</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020004</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020005</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020006</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020007</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020008</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020009</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020010</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020011</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020012</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020013</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020014</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020015</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020016</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020017</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020018</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020019</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
            <tr>  
                <td align="center">201404020020</td>  
                <td>测试业务</td>  
                <td>申请企业名称</td>  
                <td align="center">2014-03-13</td>  
                <td align="center">在办</td>  
            </tr>  
        </table>  
    </div>  
    <div id="demo2"></div>  
</div>  
<script type="text/javascript">  
var speed = 50;  
demo2.innerHTML = demo1.innerHTML;  
function Marquee() {  
    if (demo2.offsetTop - demo.scrollTop <= 0) {  
        demo.scrollTop -= demo1.offsetHeight;  
    } else {  
        demo.scrollTop++;  
    }  
}  
var MyMar = setInterval(Marquee, speed);  
  
demo.onmouseover = function() {  
    clearInterval(MyMar);  
}  
  
demo.onmouseout = function() {  
    MyMar = setInterval(Marquee, speed);  
}  
</script>  
</body>  
</html>

LKBBD
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
无缝隙轮播上下滚动(HTML+CSS+TP)
qq_51504905的博客
11-01 530
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewpo
html新闻上下自动滚动代码,基于JS实现新闻列表无缝向上滚动实例代码
weixin_39636717的博客
05-30 658
当新闻较多，并且空前有限的时候，使用滚动是一个不错的选择，本章节就通过代码实例介绍一下如何实现此效果。代码实例如下:文字列表无缝向上滚动代码*{margin:0px;padding:0px;border:0px;}body{font-size:12px}#demo{overflow:hidden;height:80px;width:280px;margin:90px auto;position:r...
【博主推荐】html好看的列表滚动效果（附源码）
xcLeigh
05-20 8446
【博主推荐】html好看的列表滚动效果（附源码） 1.实现列表滚动，上下无缝衔接； 2.实现鼠标悬浮停止滚动；
html中设置某个区域自动上下滚动
weixin_30922589的博客
07-14 5095
1.这是运行效果： 向上(请把鼠标移到这里) 0test 1test 2test 3test 4test 5test 6test 7test 8test 9test 10test 11test 12test 13test 14test 15test 16test 17test 18test 19test 20test 21test 2...
博主推荐html好看的列表滚动效果（源码）
05-20
【博主推荐】html好看的列表滚动效果（附源码） - 功能实现 >1.实现列表滚动，上下无缝衔接； >2.实现鼠标悬浮停止滚动； >3.实现多列表滚动;
用CSS3实现无限循环的无缝滚动的示例代码
12-02
【CSS3实现无限循环无缝滚动】在网页设计中，为了创建动态效果，有时我们需要让一些内容如新闻、公告等在页面上实现无限循环滚动。本文将详细介绍如何利用CSS3的特性来实现这一功能，尤其关注`transform`和`...
轻量级列表无限滚动组件
01-24
在IT领域，尤其是在Web开发中，轻量级列表无限滚动组件是一种常见的用户界面设计技术，它使得用户在浏览长列表时无需手动翻页，而是通过滚动页面，内容会自动加载更多，提供无缝的浏览体验。这种组件对于提高用户...
js实现列表向上无限滚动
10-15
总结起来，这个示例展示了如何使用JavaScript实现列表的向上无限滚动效果，包括数据获取、DOM操作和定时器的使用。这种效果可以通过调整速度和停留时间进行个性化定制，适用于多种场景，如实时更新的数据流或新闻...
Vue.js 无限滚动列表性能优化方案
10-15
Vue.js 无限滚动列表是一种常见的前端技术，用于处理大数据量的列表展示，特别是在网页滚动时动态加载更多数据。由于直接渲染大量DOM元素会导致性能下降，所以需要进行优化以提高用户体验。本文将详细介绍Vue.js实现...
infinite-scrolling:无限滚动示例
03-11
在HTML环境中，我们可以结合JavaScript和CSS来创建一个简单的无限滚动示例。首先，HTML结构应包含一个容器，用于装载动态加载的内容。然后，使用JavaScript监听滚动事件，当达到触发条件时，通过Ajax向服务器请求更...
html+css+javascript实现列表循环滚动示例代码
12-13
说明：设置时间定时，在规定的时间内替换前一个节点的内容 1、关键代码：javascript： 复制代码代码如下: [removed] var dome=document.getElementById(“dome”); //获取节点 var dome1=document.getElementById(“dome1”); var dome2=document.getElementById(“dome2”); var speed=50;//设置向上轮动的速度 dome2[removed]=dome1[removed];//复制节点 关键语句 func
大量数据html页面表格滚动显示
03-08
可从后台写循环获取上万数据，赋值到js全局变量，每次滚动显示所需分页数据，不会一次性显示大数据量导致页面滚动卡死，从ag-grid控件中获取想法，该文件可参考，ag-grid利用css3不兼容ie8，已换成别的想法支持
html无限级分类前端输出输出,无限级分类问题
weixin_39841825的博客
07-14 203
0 =>array (size=12)'id' => string '1' (length=1)'name' => string 'Test' (length=13)'parent_id' => string '0' (length=1)'path' => string '0,' (length=2)'order' => string '100' (length...
HTML保姆级教程（一）标题，段落，滚动，列表标签
OakHachi'Blog
02-22 1243
图集HTML，快速入门实战
js实现列表从下往上循环滚动
m0_37238192的博客
09-18 1688
js实现列表从下往上循环滚动 html: &lt;div class="liscorll"&gt; 　　&lt;ul&gt; 　　　　&lt;li&gt;内容&lt;/li&gt; 　　&lt;/ul&gt; &lt;/div&gt; js： /* 通知-滚动条 */ var doscroll = function(){ va
html 实现一个表头固定、列表可滚动、宽度自适应、文字自动换行的table
最新发布
weixin_44463883的博客
12-07 1197
html 实现一个表头固定、列表可滚动、宽度自适应、文字自动换行的table。
HTML Table 列表滚动
热门推荐
c331043的专栏
11-24 1万+
参考地址 http://www1.qdfuns.com/article-5603914-1-1.html项目需求：从服务器获得数据在前台填充到Table 前端UI框架 layui http://www.layui.com/ 用了layui的数据表格代码。生成Table后前端简略结构如下 //html 结构 使tr内容进行滚动 <div class="divWarning"> <div cl
html的li标签结合layui实现滚动列表
G探险者的博客
05-22 1256
在项目开发中经常遇到需要实现一个滚动列表，所以讲已经实现好的代码，提炼出来，后期遇到类似需求可以照猫画虎 代码如下 1、html页面部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GDP</title> <link rel="stylesheet" href="${basePath}pages/gggl/layui/css/layu
html的列表怎么做出自动滚动,javascript – 如何水平自动滚动无序列表？
weixin_35935249的博客
06-02 353
这是一个简单的插件函数,可以无限滚动列表项：立即更新两个：$.fn.scrollList = function (delay) {delay = delay || 2000;var animateList = function ($list) {//get first childvar $first = $list.children('li:first');var width = $first.o...
vue非插件实现列表无限循环滚动
05-13
当滚动到边界处时，将边界列表的数据复制到另一个列表中，实现无限循环滚动的效果。 下面是一个简单的实现示例： ```html (item, index) in visibleData" :key="index"> {{ item }} (item, index) ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值