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判断IE6等浏览器的代码
Apr 05 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 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判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
video.js添加自定义组件的方法
2020/12/09 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
python中的yield使用方法
2014/02/11 Python
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
Python 在函数上添加包装器
2020/07/28 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
Python下载的11种姿势(小结)
2020/11/18 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
生产经理的自我评价分享
2013/11/07 职场文书
简历中的自我评价范文
2014/02/05 职场文书
员工安全生产责任书
2014/07/22 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
Python 视频画质增强
2022/04/28 Python
vue使用element-ui按需引入
2022/05/20 Vue.js