这个例子是jquery动态加载列表,并通过定时刷新,实现其循环滚动效果的一个例子。

1、HTML代码:

  1. <div class="fake-table">
  2. <li class="fake-table-hr">
  3. <span>姓名</span>
  4. <span>地点</span>
  5. <span>联系方式</span>
  6. </li>
  7. <div class="table-wrap">
  8. <ul id="J_Table">
  9. </ul>
  10. </div>
  11. </div>

2、CSS代码:

  1. .fake-table {
  2. position: relative;
  3. height: 140px;
  4. font-size: 14px;
  5. list-style: none;
  6. }
  7.  
  8. .table-wrap {
  9. height: 120px;
  10. overflow: hidden;
  11. }
  12.  
  13. .table-wrap ul {
  14. position: rerlative;
  15. }
  16.  
  17. .fake-table li {
  18. width: 500px;
  19. height: 20px;
  20. margin: 0 auto;
  21. line-height: 20px;
  22. border: 1px solid #0B519D;
  23. background-color: rgba(24, 65, 157, 0.25);
  24. border-top: none;
  25. }
  26.  
  27. .fake-table li.fake-table-hr {
  28. height: 20px;
  29. line-height: 20px;
  30. background: url(images/table-tr.png) no-repeat;
  31. border: none;
  32. font-weight: bold;
  33. }
  34.  
  35. .fake-table li span {
  36. float: left;
  37. height: 20px;
  38. line-height: 20px;
  39. overflow: hidden;
  40. white-space: nowrap;
  41. text-overflow: ellipsis;
  42. text-align: center;
  43. }

3、JS代码:

  1. <script type="text/javascript">
  2. $(function(){
  3. // 定义要加载的数据
  4. var data = [{
  5. name: '张三',
  6. address: '滨江区信诚路',
  7. contact: '15727678507'
  8. },{
  9. name: '张三',
  10. address: '滨江区信诚路',
  11. contact: '15727678507'
  12. },{
  13. name: '张三',
  14. address: '滨江区信诚路',
  15. contact: '15727678507'
  16. },{
  17. name: '张三',
  18. address: '滨江区信诚路',
  19. contact: '15727678507'
  20. },{
  21. name: '张三',
  22. address: '滨江区信诚路',
  23. contact: '15727678507'
  24. },{
  25. name: '张三',
  26. address: '滨江区信诚路',
  27. contact: '15727678507'
  28. }
  29. ];
  30.  
  31. /**
  32. * renderTableData(循环数组加载列表方法)
  33. * @param [Array] data(要加载的数组)
  34. */
  35. function renderTableData(data) {
  36. var len = data.lenght;
  37. var lineHeight = 20; // 每行li的行高
  38. var infoWrap = $('#J_Table');
  39. var htmlArr = [];
  40. var item = '';
  41. for (var i = 0; i < len; i++) {
  42. item = '<li>'
  43. + '<span>' + data[i]['name'] + '</span>'
  44. + '<span>' + data[i]['address'] + '</span>'
  45. + '<span>' + data[i]['contact'] + '</span>'
  46. + '</li>';
  47. htmlArr.push(item);
  48. }
  49.  
  50. infoWrap.prepend(htmlArr.join('')); // 将htmlArr数组添加到页面元素中
  51.  
  52. infoWrap.css({
  53. 'top': - len * lineHeight + 'px'; // 设置(负每行行高*数组长度)的top值,将加载列表定位到显示区域上方(即隐藏)
  54. }).animate({
  55. 'top': '0px' // 设置top值为0,即加载列表整个展示出来
  56. }, 1000, 'swing', function() { // 设置间隔为1000,动画效果为"swing"(有"swing"和"linear"两种)
  57. $('li:gt(' + (len - 1) + ')', infoWrap).remove(); // 将原先的元素内容移除
  58. });
  59. }
  60.  
  61. /**
  62. *timlyRenderData (定时请求的方法)
  63. *
  64. */
  65. function timlyRenderData() {
  66. if(this.clearTimlyId) { // 如果定时请求存在,则清除
  67. clearInterval(this.clearTimlyId);
  68. }
  69. this.clearTimlyId = setInterval(function() { // 创建定时请求
  70. renderTableData(data);
  71. }, 5000);
  72. }
  73.  
  74. renderTableData(data); //调用该方法
  75.  
  76. timlyRenderData(); // 调用定时请求方法
  77. });

JQuery加载列表实现动画滚动(自上而下挤)的更多相关文章

  1. jquery实现移动端页面加载后,向上滚动指定距离无效引起的探索

    效果如下,页面加载完后向上滚动一段距离 最近一同事询问用jquery为何无法实现上面效果,查看代码后发现代码并没写错,   也正确引入了zepto.js,也不是版本问题(因为是移动端项目,出于性能和需 ...

  2. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  3. Vue中实现一个无限加载列表

    参考 https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> < ...

  4. JQuery 加载 CSS、JS 文件

    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...

  5. 用C3中的animation和transform写的一个模仿加载的时动画效果

    用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...

  6. Tree:加载列表数据

    Tree控件,需要提供一个树形的JSON数据,才能正常显示. 通常,开发者在后台可以这样做: 1)从数据库查询出一个列表数据 2)在后台,将列表数据转换为树形数据 3)通过JSON方式返回 在前台页面 ...

  7. jQuery加载一个html页面到指定的div里

    一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...

  8. 使用jQuery加载html页面到指定的div

    一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...

  9. jquery加载页面的方法

    jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别.   1.$(function(){ $("#a&q ...

随机推荐

  1. py-day1-4 python基本数据类型2

    # replace 替换 text = 'xiaomafafafahaoyunlianlian' v = text.replace('fa','shun') x = text.replace('fa' ...

  2. 大数据离线分析平台 JavaSDK数据收集引擎编写

    JavaSDK设计规则 JavaSDK提供两个事件触发方法,分别为onChargeSuccess和onChargeRefund.我们在java sdk中通过一个单独的线程来发送线程数据,这样可以减少对 ...

  3. Azkaban介绍+安装部署+实战案例

    Azkaban介绍 什么是azkaban?1.工作流的作业调度系统2.通过k.v指令写法描述工作流节点3.可以通过web界面去管理工作流 Azkaban安装部署 2.3.1 准备工作 Azkaban ...

  4. mysql二进制日志详解

    一.什么是二进制日志 二进制日志主要记录mysql数据库的变化,二进制日志包含所有更新了数据或者潜在更新了数据(如没有匹配到任何行的delete语句),语句以时间的形式保存,描述了数据的更改.二进制日 ...

  5. 图数据库cayley+mongo的起航之旅

    图数据库,目前比较主流的可能是Neo4j以及cayley了.但是,由于Neo4j只有社区版是免费的,所以,选择cayley作为项目的最终选择! 今天就简单的介绍下,我的起航之旅. 1.安装go语言环境 ...

  6. SDRAM单字写操作

    SDRAM单字写操作 1.单字写操作时序 2.写verilog程序体会 在初始状态,先写好跳转条件.If()....else... 3.通过仿顺序操作来实现连续写操作 首先完成单字写操作,然后跳转到下 ...

  7. Delegate event 委托事件---两个From窗体使用委托事件

    窗体如下:   public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void b ...

  8. webservice的model层命名空间不同的问题

        [XmlType(Namespace = "http://tempuri.org/MyClass4")]     [XmlRoot(Namespace = "ht ...

  9. 在VMware中安装Mac OS

    macOS与Darwin http://blog.csdn.net/hintcnuie/article/details/38468093 OS X 是整个操作系统的一个集体名称.而Darwin 就是其 ...

  10. Facebook Login api

    http://blog.kenyang.net/2012/01/androidfacebook-login-api.html http://blog.kenyang.net/2012/01/faceb ...