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 相关文章推荐
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
js实现弹窗效果
Aug 09 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
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 处理图片的类实现代码
2009/10/23 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
Python实现针对中文排序的方法
2017/05/09 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
python实现汽车管理系统
2018/11/30 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
python 调用Google翻译接口的方法
2020/12/09 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
Shell编程面试题
2012/05/30 面试题
银行出纳岗位职责
2013/11/25 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
学校安全防火方案
2014/06/07 职场文书
四风问题查摆材料
2014/08/25 职场文书
学生检讨书怎么写
2014/10/09 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
办公室卫生管理制度
2015/08/04 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
Python保存并浏览用户的历史记录
2022/04/29 Python