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中Object和Function的关系小结
Sep 26 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
Vue+Spring Boot简单用户登录(附Demo)
Nov 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和ACCESS写聊天室(七)
2006/10/09 PHP
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
Python实现拼接多张图片的方法
2014/12/01 Python
Python如何获取系统iops示例代码
2016/09/06 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
使用python爬取B站千万级数据
2018/06/08 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
JAVA程序员面试题
2012/10/03 面试题
高中生活自我鉴定
2014/01/18 职场文书
数学检讨书1000字
2014/02/24 职场文书
厨师长岗位职责
2014/03/02 职场文书
考试诚信承诺书
2014/05/23 职场文书
小学班级特色活动方案
2014/08/31 职场文书
2015年中秋节主持词
2015/07/30 职场文书