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 相关文章推荐
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
JSONObject使用方法详解
Dec 17 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
js自定义input文件上传样式
Oct 26 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 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 goto语句用法实例
2019/08/06 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
python使用cookie库操保存cookie详解
2014/03/03 Python
python调用java的jar包方法
2018/12/15 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Python networkx包的实现
2020/02/14 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
工作自荐信
2013/12/11 职场文书
大学自主招生自荐信
2013/12/16 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
自我鉴定注意事项
2014/01/19 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
家庭经济困难证明
2015/06/23 职场文书
Python闭包的定义和使用方法
2022/04/11 Python
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS