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各种复制代码收集
Sep 20 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
JavaScript 自定义事件之我见
Sep 25 Javascript
js数组去重的方法总结
Jan 18 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
python中base64加密解密方法实例分析
2015/05/16 Python
详解django中使用定时任务的方法
2018/09/27 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
医药类个人求职的自我评价
2014/02/12 职场文书
学生吸烟检讨书
2014/09/14 职场文书
大学生实训报告总结
2014/11/05 职场文书
护士实习自荐信
2015/03/06 职场文书
鉴史问廉观后感
2015/06/10 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis