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数组处理方法汇总
Jun 20 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 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
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
脚本收藏iframe
2006/07/21 Javascript
JavaScript脚本性能的优化方法
2007/02/02 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
js 图片懒加载的实现
2020/10/21 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
机器学习python实战之手写数字识别
2017/11/01 Python
python+django加载静态网页模板解析
2017/12/12 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
解决Python中回文数和质数的问题
2019/11/24 Python
python批量处理txt文件的实例代码
2020/01/13 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
linux面试题参考答案(8)
2016/04/19 面试题
晚宴邀请函范文
2014/01/15 职场文书
教学器材管理制度
2014/01/26 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python