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

1、HTML代码:

<div class="fake-table">
<li class="fake-table-hr">
<span>姓名</span>
<span>地点</span>
<span>联系方式</span>
</li>
<div class="table-wrap">
<ul id="J_Table">
</ul>
</div>
</div>

2、CSS代码:

.fake-table {
position: relative;
height: 140px;
font-size: 14px;
list-style: none;
} .table-wrap {
height: 120px;
overflow: hidden;
} .table-wrap ul {
position: rerlative;
} .fake-table li {
width: 500px;
height: 20px;
margin: 0 auto;
line-height: 20px;
border: 1px solid #0B519D;
background-color: rgba(24, 65, 157, 0.25);
border-top: none;
} .fake-table li.fake-table-hr {
height: 20px;
line-height: 20px;
background: url(images/table-tr.png) no-repeat;
border: none;
font-weight: bold;
} .fake-table li span {
float: left;
height: 20px;
line-height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}

3、JS代码:

<script type="text/javascript">
$(function(){
// 定义要加载的数据
var data = [{
name: '张三',
address: '滨江区信诚路',
contact: '15727678507'
},{
name: '张三',
address: '滨江区信诚路',
contact: '15727678507'
},{
name: '张三',
address: '滨江区信诚路',
contact: '15727678507'
},{
name: '张三',
address: '滨江区信诚路',
contact: '15727678507'
},{
name: '张三',
address: '滨江区信诚路',
contact: '15727678507'
},{
name: '张三',
address: '滨江区信诚路',
contact: '15727678507'
}
]; /**
* renderTableData(循环数组加载列表方法)
* @param [Array] data(要加载的数组)
*/
function renderTableData(data) {
var len = data.lenght;
var lineHeight = 20; // 每行li的行高
var infoWrap = $('#J_Table');
var htmlArr = [];
var item = '';
for (var i = 0; i < len; i++) {
item = '<li>'
+ '<span>' + data[i]['name'] + '</span>'
+ '<span>' + data[i]['address'] + '</span>'
+ '<span>' + data[i]['contact'] + '</span>'
+ '</li>';
htmlArr.push(item);
} infoWrap.prepend(htmlArr.join('')); // 将htmlArr数组添加到页面元素中 infoWrap.css({
'top': - len * lineHeight + 'px'; // 设置(负每行行高*数组长度)的top值,将加载列表定位到显示区域上方(即隐藏)
}).animate({
'top': '0px' // 设置top值为0,即加载列表整个展示出来
}, 1000, 'swing', function() { // 设置间隔为1000,动画效果为"swing"(有"swing"和"linear"两种)
$('li:gt(' + (len - 1) + ')', infoWrap).remove(); // 将原先的元素内容移除
});
} /**
*timlyRenderData (定时请求的方法)
*
*/
function timlyRenderData() {
if(this.clearTimlyId) { // 如果定时请求存在,则清除
clearInterval(this.clearTimlyId);
}
this.clearTimlyId = setInterval(function() { // 创建定时请求
renderTableData(data);
}, 5000);
} renderTableData(data); //调用该方法 timlyRenderData(); // 调用定时请求方法
});

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. 获取docker容器的ip地址

    1.进入容器后执行cat /etc/hosts 会显示自己以及(– link)软连接的容器IP 2.使用命令 docker inspect --format '{{ .NetworkSettings. ...

  2. Centos6.8 Mysql5.6 安装配置教程(转)

    准备Mysql文件: 方式一:wget url(mysql下载地址); 方式二:从官网下载mysql,上传至centos(小编使用的Nodepad++的NppFTP具体做法请百度);   检查之前安装 ...

  3. NET设计模式 第二部分 行为型模式(16):命令模式(Command Pattern)

    命令模式(Command Pattern) ——.NET设计模式系列之十七 TerryLee,2006年7月 概述 在软件系统中,“行为请求者”与“行为实现者”通常呈现一种“紧耦合”.但在某些场合,比 ...

  4. Linux lsattr命令详解

    Linux lsattr命令 Linux lsattr命令用于显示文件属性. 用chattr执行改变文件或目录的属性,可执行lsattr指令查询其属性 用法: lsattr [-adlRvV][文件或 ...

  5. gcc与g++的一些关系

    Gcc 简介Linux系统下的gcc(GNU C Compiler)是GNU推出的功能强大.性能优越的多平台编译器,是GNU的代表作品之一.Gcc是可以在多种硬体平台上编译出可执行程序的超级编译器,其 ...

  6. 《JavaScript设计模式与开发》笔记 5.关于正确写一个闭包

    1.如何正确使用闭包 1.常用闭包 var asd =(function(){ var value = 0 //私有变量放入内存 return function(){ //biubiubiu 发射火箭 ...

  7. ECR是什么意思

    有效客户反应简称为ECR(efficient consumer response).它是1992年从美国的食品杂货业发展起来的一种供应链管理战略.这是一种分销商与供应商为消除系统中不必要的成本和费用并 ...

  8. [蓝桥杯]ALGO-8.算法训练_操作格子

    题目描述: 问题描述 有n个格子,从左到右放成一排,编号为1-n. 共有m次操作,有3种操作类型: .修改一个格子的权值, .求连续一段格子权值和, .求连续一段格子的最大值. 对于每个2.3操作输出 ...

  9. LeetCode——1. Two Sum

    一.题目链接:https://leetcode.com/articles/two-sum/ 二.题目大意: 给定一个int型数组A和int值a,要求从A中找到两个数,使得这两个数值的和为a:返回结果为 ...

  10. bzoj5045: 打砖块

    Description 小Q最近沉迷于一款新型<打砖块>游戏.在每局游戏中,呈现在屏幕上的是一堵无限大小的墙壁.墙壁上镶嵌着 无数长度为2.宽度为1的砖块.墙壁被分成若干行,每行宽度都为1 ...