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动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
vue实现简单计算商品价格
Sep 14 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
PHP程序员基本要求和必备技能
2014/05/09 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
制作特殊字的脚本
2006/06/26 Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
潜说js对象和数组
2011/05/25 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
跟老齐学Python之变量和参数
2014/10/10 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
python 实现登录网页的操作方法
2018/05/11 Python
对Python _取log的几种方式小结
2019/07/25 Python
python实现拼图小游戏
2020/02/22 Python
python中pyqtgraph知识点总结
2021/01/26 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
学生处主任岗位职责
2013/12/01 职场文书
女生节标语
2014/06/26 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
党员先进事迹材料
2014/12/19 职场文书
初中毕业生自我评价
2015/03/02 职场文书
政协工作总结2015
2015/05/20 职场文书
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
MySQL数据库完全卸载的方法
2022/03/03 MySQL