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操作checkbox选择(list/table)
Apr 07 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
js正则取值的结果数组调试方法
Oct 10 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 Javascript
vue-cli 关闭热更新操作
Sep 18 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传输数据的代码
2007/11/13 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
javascript的BOM汇总
2015/07/16 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
Python列表append和+的区别浅析
2015/02/02 Python
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
详解Python sys.argv使用方法
2019/05/10 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
青年文明号事迹材料
2014/01/18 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
委托书英文
2015/01/28 职场文书
人力资源部岗位职责
2015/02/11 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫
Python matplotlib多个子图绘制整合
2022/04/13 Python