这个例子是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. Mongo 用户创建及权限管理

    Mongo版本3.0之前使用的是db.addUser(),但3.0之后使用的是db.createUser() 内建的角色: 数据库用户角色:read.readWrite; 数据库管理角色:dbAdmi ...

  2. 服务发现:Zookeeper vs etcd vs Consul 参考自http://dockone.io/article/667

    服务发现:Zookeeper vs etcd vs Consul [编者的话]本文对比了Zookeeper.etcd和Consul三种服务发现工具,探讨了最佳的服务发现解决方案,仅供参考. 如果使用预 ...

  3. SoapUI 5.2.1 调试工具

    SoapUI 5.2.1 调试工具 1.打开soapUI. 2.新建一个项目,实例如下: 点击ok后在soapUI界面左侧会显示出此项目,如图: 2.创建测试用例: a.新建用例组,选择此项目右键,新 ...

  4. DateGridView标题列头添加复选框

    第一:添加列标题时,添加两个空格——用于显示复选框: 第二:实现列标题添加复选框,代码如下: private void AddCheckeBoxToDGVHeader(DataGridView dgv ...

  5. TreeView添加图片

    实现方式一: 通过代码方式实现如下所示: private string FilePath = Application.StartupPath + "\\Images\\"; Ima ...

  6. 在VMware中安装Mac OS

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

  7. Mysql 性能优化7【重要】sql语句的优化 慢查询

    慢查询时间设置 慢查询日志分析工具 另一个慢查询日志分析工具 如何对sql进行特定的优化

  8. git 查看提交的信息diff

    git log --stat git show <hashcode> <filename> git log --pretty=oneline <filename> ...

  9. C++进阶--逻辑常数和比特位常数(Logical constness vs Bitwise constness)

    对于什么是const函数,有两种理解 Logical constness 实际的数据没有没修改,如下面程序中的vector v Bitwise constness 类的成员变量没有被修改,包括int ...

  10. 【并发编程】使用BlockingQueue实现<多生产者,多消费者>

     MasterThread: 持有一个BlockingQueue队列,用于并发接收存储MetaData对象; 使用Hash一致性算法ketama,来选择SlaveThread节点; 从Blocking ...