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 相关文章推荐
Javascript MD4
Dec 20 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
js序列化和反序列化的使用讲解
Jan 19 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
JS实现星星海特效
Dec 24 Javascript
js实现抽奖功能
Nov 24 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模拟HTTP认证
2006/10/09 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
解析php入库和出库
2013/06/25 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
php fread读取文件注意事项
2016/09/24 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
python中文乱码的解决方法
2013/11/04 Python
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python命名空间详解
2014/08/18 Python
Python while 循环使用的简单实例
2016/06/08 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Python中一行和多行import模块问题
2018/04/01 Python
Python 忽略warning的输出方法
2018/10/18 Python
Python跳出多重循环的方法示例
2019/07/03 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
Python学习之time模块的基本使用
2021/01/17 Python
new修饰符是起什么作用
2015/06/28 面试题
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
2014年残联工作总结
2014/11/21 职场文书
考察邀请函范文
2015/01/31 职场文书
西湖英语导游词
2015/02/06 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS