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 typeof 用法
Dec 28 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
浅谈TypeScript的类型保护机制
Feb 23 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 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中的extract的作用分析
2008/04/09 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
js模拟滚动条(横向竖向)
2013/02/22 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
javascript代码优化的8点总结
2018/01/29 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
python求最大连续子数组的和
2018/07/07 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
python属于软件吗
2020/06/18 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
焊接专业毕业生求职信
2013/10/01 职场文书
工程采购员岗位职责
2014/03/09 职场文书
期末学生评语大全
2014/04/24 职场文书
元旦晚会活动总结
2014/07/09 职场文书
村官个人总结范文
2015/03/03 职场文书
教你用python控制安卓手机
2021/05/13 Python
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android