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 相关文章推荐
js实现广告漂浮效果的小例子
Jul 02 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
js的touch事件的实际引用
Oct 13 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
微信小程序签到功能
Oct 31 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
vue 图片裁剪上传组件的实现
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
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
使用js简单实现了tree树菜单
2013/11/20 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
深入了解Python数据类型之列表
2016/06/24 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
python生成带有表格的图片实例
2019/02/03 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
用python写测试数据文件过程解析
2019/09/25 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
小学生新学期寄语
2014/01/19 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
大学生见习报告总结
2014/11/04 职场文书
学雷锋日活动总结
2015/02/06 职场文书