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中hasClass()方法用法实例
Jan 06 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 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的ASP防火墙
2006/10/09 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
一些常用的Javascript函数
2006/12/22 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
python中的随机函数random的用法示例
2018/01/27 Python
python取代netcat过程分析
2018/02/10 Python
flask入门之表单的实现
2018/07/18 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
Python 实现进度条的六种方式
2021/01/06 Python
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
四风问题个人对照检查剖析材料
2014/09/27 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
公务员年终个人总结
2015/02/12 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python