1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>table表格无缝向上滚动</title>
  6. <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  7. <style>
  8. .tablebox {
  9.     height: 500px;
  10.     overflow: hidden;
  11.     position: relative;
  12.     width: 1000px;
  13.     margin: 100px auto;
  14.     background-color: rgba(6,26,103,1);
  15. }
  16.  
  17. .tbl-header {
  18.     width: 100%;
  19.     position: absolute;
  20.     top: 0;
  21.     left: 0;
  22.     z-index: 999;
  23. }
  24.  
  25. .tbl-body {
  26.     width: 100%;
  27.     position: absolute;
  28.     top: 0;
  29.     left: 0;
  30. }
  31. .tablebox table {
  32.     width: 100%;
  33. }
  34.  
  35. .tablebox table th,
  36. .tablebox table td {
  37.     font-size: 24px;
  38.     color: #7ca6f4;
  39.     line-height: 45px;
  40.     text-align: center;
  41. }
  42.  
  43. .tablebox table tr th {
  44.     background-color: #1f1f9c;
  45.     cursor: pointer;
  46. }
  47.  
  48. .tablebox table tr td {
  49.     background-color: transparent;
  50. }
  51.  
  52. .tbl-body tr:nth-child(even) td,.tbl-body1 tr:nth-child(even) td {
  53.     background-color: rgba(31, 31, 156, .5);
  54. }
  55.  
  56. .tablebox table tr td span,
  57. .tablebox table tr td span {
  58.     font-size: 24px;
  59. }</style>
  60. </head>
  61. <body>
  62.     <div class="tablebox">
  63.  
  64.             <div class="tbl-header">
  65.                 <table border="0" cellspacing="0" cellpadding="0">
  66.                     <thead>
  67.                         <tr>
  68.                             <th>排名</th>
  69.                             <th>地市</th>
  70.                             <th>销售收入(万元)</th>
  71.                             <th>同比(%)</th>
  72.                             <th>环比(%)</th>
  73.                             <th>销售计划(万元)</th>
  74.                             <th>计划完成率(%)</th>
  75.                         </tr>
  76.                     </thead>
  77.                     <tbody style="opacity:0;"></tbody>
  78.                 </table>
  79.             </div>
  80.  
  81.             <div class="tbl-body">
  82.                 <table border="0" cellspacing="0" cellpadding="0">
  83.                     <thead>
  84.                         <tr>
  85.                             <th>排名</th>
  86.                             <th>地市</th>
  87.                             <th>销售收入(万元)</th>
  88.                             <th>同比(%)</th>
  89.                             <th>环比(%)</th>
  90.                             <th>销售计划(万元)</th>
  91.                             <th>计划完成率(%)</th>
  92.                         </tr>
  93.                     </thead>
  94.                     <tbody></tbody>
  95.                 </table>
  96.             </div>
  97.         </div>
  98.  
  99. <script>
  100. var MyMarhq = '';
  101. clearInterval(MyMarhq);
  102. $('.tbl-body tbody').empty();
  103. $('.tbl-header tbody').empty();
  104. var str = '';
  105. var Items = [{"Ranking":"1","City":"保定","SaleIncome":"2506734.43","SaleRough":"296071.96","SalePlan":"7200000","PlanFinish":"34.82","TonOilincome":"264.15","OilTransform":"29.62","An":"53.00","Mom":"-13.00"},
  106.     {"Ranking":"2","City":"沧州","SaleIncome":"1425935.58","SaleRough":"93717.83","SalePlan":"3200000","PlanFinish":"44.56","TonOilincome":"366.59","OilTransform":"11.23","An":"65.00","Mom":"43.00"},
  107.     {"Ranking":"3","City":"秦皇岛","SaleIncome":"1372207.38","SaleRough":"241071.82","SalePlan":"3000000","PlanFinish":"45.74","TonOilincome":"342.32","OilTransform":"6.61","An":"34.00","Mom":"7.00"},
  108.     {"Ranking":"4","City":"衡水","SaleIncome":"972451.15","SaleRough":"87638.60","SalePlan":"2700000","PlanFinish":"36.02","TonOilincome":"246.03","OilTransform":"11.56","An":"15.00","Mom":"-18.00"},
  109.     {"Ranking":"5","City":"石家庄","SaleIncome":"939010.52","SaleRough":"140217.37","SalePlan":"7200000","PlanFinish":"13.04","TonOilincome":"139.44","OilTransform":"19.23","An":"-57.00","Mom":"-48.00"},
  110.     {"Ranking":"6","City":"邢台","SaleIncome":"774274.70","SaleRough":"124693.90","SalePlan":"3700000","PlanFinish":"20.93","TonOilincome":"138.87","OilTransform":"9.44","An":"-20.00","Mom":"-44.00"},
  111.     {"Ranking":"7","City":"唐山","SaleIncome":"680456.79","SaleRough":"50542.14","SalePlan":"3600000","PlanFinish":"18.90","TonOilincome":"243.60","OilTransform":"16.95","An":"-29.00","Mom":"-49.00"},
  112.     {"Ranking":"8","City":"张家口","SaleIncome":"613319.87","SaleRough":"176075.96","SalePlan":"3000000","PlanFinish":"20.44","TonOilincome":"87.09","OilTransform":"7.97","An":"2.00","Mom":"-24.00"},
  113.     {"Ranking":"9","City":"中油华奥","SaleIncome":"596575.25","SaleRough":"387024.26","SalePlan":"11000000","PlanFinish":"5.42","TonOilincome":"93.58","OilTransform":"19.06","An":"35.00","Mom":"6.00"},
  114.     {"Ranking":"10","City":"承德","SaleIncome":"589048.12","SaleRough":"68966.73","SalePlan":"2200000","PlanFinish":"26.77","TonOilincome":"193.24","OilTransform":"11.29","An":"30.00","Mom":"-28.00"},
  115.     {"Ranking":"11","City":"廊坊","SaleIncome":"515448.14","SaleRough":"137934.72","SalePlan":"3500000","PlanFinish":"14.73","TonOilincome":"95.47","OilTransform":"8.80","An":"-48.00","Mom":"-3.00"},
  116.     {"Ranking":"12","City":"瑞州","SaleIncome":"399875.26","SaleRough":"85371.46","SalePlan":"2000000","PlanFinish":"19.99","TonOilincome":"114.42","OilTransform":"11.42","An":"128.00","Mom":"-30.00"},
  117.     {"Ranking":"13","City":"石家庄中油","SaleIncome":"90543.62","SaleRough":"20065.14","SalePlan":"430000","PlanFinish":"21.06","TonOilincome":"213.44","OilTransform":"20.45","An":"-24.00","Mom":"-17.00"},
  118.     {"Ranking":"14","City":"辛集中油","SaleIncome":"49255.52","SaleRough":"8743.12","SalePlan":"250000","PlanFinish":"19.70","TonOilincome":"202.67","OilTransform":"29.95","An":"19.00","Mom":"-6.00"},
  119.     {"Ranking":"15","City":"井陉中油","SaleIncome":"29682.60","SaleRough":"2175.66","SalePlan":"140000","PlanFinish":"21.20","TonOilincome":"730.20","OilTransform":"25.55","An":"-74.00","Mom":"-52.00"},
  120.     {"Ranking":"16","City":"保定中油","SaleIncome":"11887.73","SaleRough":"2944.97","SalePlan":"100000","PlanFinish":"11.89","TonOilincome":"118.12","OilTransform":"34.16","An":"-64.00","Mom":"-72.00"}]
  121. $.each(Items,function (i, item) {
  122.     str = '<tr>'+
  123.         '<td>'+item.Ranking+'</td>'+
  124.         '<td>'+item.City+'</td>'+
  125.         '<td>'+(+item.SaleIncome/10000).toFixed(2)+'</td>'+
  126.         '<td>'+(+item.An).toFixed(2)+'</td>'+
  127.         '<td>'+(+item.Mom).toFixed(2)+'</td>'+
  128.         '<td>'+(item.SalePlan/10000).toFixed(2)+'</td>'+
  129.         '<td>'+(+item.PlanFinish).toFixed(2)+'</td>'+
  130.         '</tr>'
  131.  
  132.     $('.tbl-body tbody').append(str);
  133.     $('.tbl-header tbody').append(str);
  134. });
  135.  
  136. if(Items.length > 10){
  137.     $('.tbl-body tbody').html($('.tbl-body tbody').html()+$('.tbl-body tbody').html());
  138.     $('.tbl-body').css('top', '0');
  139.     var tblTop = 0;
  140.     var speedhq = 50; // 数值越大越慢
  141.     var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();
  142.     function Marqueehq(){
  143.         if(tblTop <= -outerHeight*Items.length){
  144.             tblTop = 0;
  145.         } else {
  146.             tblTop -= 1;
  147.         }
  148.         $('.tbl-body').css('top', tblTop+'px');
  149.     }
  150.  
  151.     MyMarhq = setInterval(Marqueehq,speedhq);
  152.  
  153.     // 鼠标移上去取消事件
  154.     $(".tbl-header tbody").hover(function (){
  155.         clearInterval(MyMarhq);
  156.     },function (){
  157.         clearInterval(MyMarhq);
  158.         MyMarhq = setInterval(Marqueehq,speedhq);
  159.     })
  160.  
  161. }
  162. </script>
  163.  
  164. </body>
  165. </html>

js实现表格无缝滚动效果的更多相关文章

  1. js实现简单易用的上下无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. liMarquee演示12种不同的无缝滚动效果

    很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...

  3. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

  4. 信息无缝滚动效果marquee

    横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML ...

  5. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  6. js文字展示各种滚动效果

    js文字展示各种滚动效果:http://www.dowebok.com/demo/188/

  7. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  8. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

  9. 用js实现图片的无缝滚动效果

    实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...

随机推荐

  1. [Swift]LeetCode848. 字母移位 | Shifting Letters

    We have a string S of lowercase letters, and an integer array shifts. Call the shift of a letter, th ...

  2. 优化之XML组件

    可在XML Parser 组件和XML Source定义中删除非project group,因为不需为这些非project group分配内存,但需要维护主键外键约束 ________________ ...

  3. spark计算两个DataFrame的差集、交集、合集

    spark 计算两个dataframe 的差集.交集.合集,只选择某一列来对比比较好.新建两个 dataframe : import org.apache.spark.{SparkConf, Spar ...

  4. BBS论坛（二十四）

    24.1.编辑板块 cms/js/banners.js $(function () { $('.edit-board-btn').click(function () { var self = $(th ...

  5. IdentityServer4之Implicit(隐式许可) —— oidc-client-js前后端分离

    IdentityServer4之Implicit(隐式许可) —— oidc-client-js前后端分离 参考 官方文档:oidc-client-js:oidc-client是一个JavaScrip ...

  6. 关于ML.NET v1.0 RC的发布说明

    ML.NET是面向.NET开发人员的开源和跨平台机器学习框架(Windows,Linux,macOS).使用ML.NET,开发人员可以利用他们现有的工具和技能组,通过为情感分析,推荐,图像分类等常见场 ...

  7. Unity资源 ----加载最好需要做哪些事

    先上图解 一.基本关键词 1)AssetBundle:一种保存“一个或多个资源的转变为某种利于传输等的特殊格式(二进制之类)”的文件.(我这边是使用Unity制作手游的角度来说明) 简称AB. 2)对 ...

  8. 基础才是重中之重~delegate里的Invoke和BeginInvoke

    回到目录 Invoke和BeginInvoke都是调用委托实体的方法,前者是同步调用,即它运行在主线程上,当Invode处理时间长时,会出现阻塞的情况,而BeginInvod是异步操作,它会从新开启一 ...

  9. linux文本处理三剑客的学习

    linux下有三个文本处理的神器.分别是grep,sed,awk.功能都是比较强大的. grep帮助: http://my-study-grep.readthedocs.io/en/latest/ s ...

  10. Magicodes.WeiChat——V3.0（多租户）版本发布

    主要内容如下: 添加项目Magicodes.WeiChat.Data.Multitenant,全面支持多租户(基于EF已经ASP.NET Identity) 增加租户管理.租户成员管理.修改密码.公众 ...