jquery 页眉单行信息滚动显示实现思路及代码


Posted in Javascript onJune 26, 2014

以下是控制滚动的样式,将滚动的内容查询出来,放在一个div 或者别的容器里面,我这里使用的是<dt>

<style>
#newCglist{width:300px;height:14px;line-height:14px;overflow:hidden}
#newCglist li{height:14px;padding-left:10px;}
</style>

以下是滚动内容展示的容器

<dt class="positionrel" id="newCglist" ><div class="new positionabs"></div></dt>

以下是js,查询滚动展示内容

var divhight ; //这是所有数据行的高度,每行行高*数据量
var showtimes ; //显示完所有数据的时间,每行显示所需的时间*数据量
function yejis(){
setInterval('AutoScroll("#newCglist")',500);
//最新成交案例展示
$.post("zrAction!newCgList.action",null,function(data){
divhight = data.length*14;
showtimes = data.length*3000;
$.each(data,function(i,datas){
$ul = $("<ul></ul>");
$tr = $("<li>"+datas[0]+" 签单成功! "+datas[1]+"元 "+datas[2]+" "+datas[3]+"</li>");
$ul.append($tr);
$("#newCglist").append($ul);
});
});

以下是控制滚动展示时间,以及样式

/**
* 首页顶部滚动效果,divhight 是所有数据的行高
* showtimes //循环滚动完这些数据所需的时间
* @param {Object} obj
* @memberOf {TypeName} 
*/
function AutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:-divhight
},showtimes,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
});
}
Javascript 相关文章推荐
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 #Javascript
document.forms用法示例介绍
Jun 26 #Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 #Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 #Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 #Javascript
php读取sqlite数据库入门实例代码
Jun 25 #Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 #Javascript
You might like
第十四节 命名空间 [14]
2006/10/09 PHP
基于PHP+MySQL的聊天室设计
2006/10/09 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
对Django中内置的User模型实例详解
2019/08/16 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
初中地理教学反思
2014/01/11 职场文书
土木建筑学生自我评价
2014/01/14 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
立春观后感
2015/06/18 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
人力资源部工作计划
2019/05/14 职场文书