JQuery加载列表实现动画滚动(自上而下挤)
这个例子是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加载列表实现动画滚动(自上而下挤)的更多相关文章
- jquery实现移动端页面加载后,向上滚动指定距离无效引起的探索
效果如下,页面加载完后向上滚动一段距离 最近一同事询问用jquery为何无法实现上面效果,查看代码后发现代码并没写错, 也正确引入了zepto.js,也不是版本问题(因为是移动端项目,出于性能和需 ...
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- Vue中实现一个无限加载列表
参考 https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> < ...
- JQuery 加载 CSS、JS 文件
JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...
- 用C3中的animation和transform写的一个模仿加载的时动画效果
用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...
- Tree:加载列表数据
Tree控件,需要提供一个树形的JSON数据,才能正常显示. 通常,开发者在后台可以这样做: 1)从数据库查询出一个列表数据 2)在后台,将列表数据转换为树形数据 3)通过JSON方式返回 在前台页面 ...
- jQuery加载一个html页面到指定的div里
一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...
- 使用jQuery加载html页面到指定的div
一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...
- jquery加载页面的方法
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a&q ...
随机推荐
- py-day1-4 python基本数据类型2
# replace 替换 text = 'xiaomafafafahaoyunlianlian' v = text.replace('fa','shun') x = text.replace('fa' ...
- 大数据离线分析平台 JavaSDK数据收集引擎编写
JavaSDK设计规则 JavaSDK提供两个事件触发方法,分别为onChargeSuccess和onChargeRefund.我们在java sdk中通过一个单独的线程来发送线程数据,这样可以减少对 ...
- Azkaban介绍+安装部署+实战案例
Azkaban介绍 什么是azkaban?1.工作流的作业调度系统2.通过k.v指令写法描述工作流节点3.可以通过web界面去管理工作流 Azkaban安装部署 2.3.1 准备工作 Azkaban ...
- mysql二进制日志详解
一.什么是二进制日志 二进制日志主要记录mysql数据库的变化,二进制日志包含所有更新了数据或者潜在更新了数据(如没有匹配到任何行的delete语句),语句以时间的形式保存,描述了数据的更改.二进制日 ...
- 图数据库cayley+mongo的起航之旅
图数据库,目前比较主流的可能是Neo4j以及cayley了.但是,由于Neo4j只有社区版是免费的,所以,选择cayley作为项目的最终选择! 今天就简单的介绍下,我的起航之旅. 1.安装go语言环境 ...
- SDRAM单字写操作
SDRAM单字写操作 1.单字写操作时序 2.写verilog程序体会 在初始状态,先写好跳转条件.If()....else... 3.通过仿顺序操作来实现连续写操作 首先完成单字写操作,然后跳转到下 ...
- Delegate event 委托事件---两个From窗体使用委托事件
窗体如下: public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void b ...
- webservice的model层命名空间不同的问题
[XmlType(Namespace = "http://tempuri.org/MyClass4")] [XmlRoot(Namespace = "ht ...
- 在VMware中安装Mac OS
macOS与Darwin http://blog.csdn.net/hintcnuie/article/details/38468093 OS X 是整个操作系统的一个集体名称.而Darwin 就是其 ...
- Facebook Login api
http://blog.kenyang.net/2012/01/androidfacebook-login-api.html http://blog.kenyang.net/2012/01/faceb ...