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 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
JQuery与iframe交互实现代码
Dec 24 Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
js特殊字符转义介绍
Nov 05 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
vue axios用法教程详解
Jul 23 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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实现阳历到农历转换的类实例
2015/03/07 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
javascript 新浪背投广告实现代码
2009/07/07 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python 获取文件列表(或是目录例表)
2009/03/25 Python
构建Python包的五个简单准则简介
2015/06/15 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
中国入世承诺
2014/04/01 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
借钱欠条怎么写
2015/07/03 职场文书
学术会议领导致辞
2015/07/29 职场文书
标准发言稿结尾
2019/07/18 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
Redis Lua脚本实现ip限流示例
2022/07/15 Redis