jquery 页眉单行信息滚动显示实现思路及代码

以下是控制滚动的样式，将滚动的内容查询出来，放在一个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);
});
}
赞 (0)

相关推荐

  • js实现单行文本向上滚动效果实例代码

    复制代码 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, autoStart) {    this.Delay = 10;    this.LineHeight = 20;    this.Amount = 1;     this.Direction = "up";    this.Timeout = 1500;    this.Scrol

  • 合并一个文件夹下多个文件内容的单行shell命令

    合并一个文件夹下多个文件内容: 复制代码 代码如下: find -name "*.log" -exec 'cat' {} \; > test.tmp

  • perl中单行注释和多行注释使用介绍

    Perl中的程序注释:单行注释和多行注释 (一)单行注释: 以#开头的行都被perl认为是注释.但是有一个例外,perl程序的第一行是#开头的,他指定了perl程序的解释器. 例如:#print 1: 这种方法有个缺点,就是每次# 只能够注释一行,如果要注释的代码很长,那就是一件很麻烦的事情. (二)多行注释: 最常用的方法是使用 POD(Plain Old Documentations) 来进行多行注释.方法如下: =pod codes to comment =cut 注意:=pod =cut

  • 10个惊艳的Swift单行代码

    几年前,一篇表述"10个Scala函数式单行代码"的文章非常受欢迎,并且随后立马出现了其他的语言版本,例如Haskell版本,Ruby版本,Groovy版本,Clojure版本,Python版本,C#版本,F#版本,CoffeeScript版本等. 我们不知道有多少人真的对这些单行代码印象深刻,但我认为,这能激励大家去了解更多有关于函数式编程的内容. 1 数组中的每个元素乘以2 特别简单,尤其是使用map解决的话. (1...1024).map{$0 * 2} 2 数组中的元素求和 虽

  • jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.1.单行滚动效果 无标题文档 ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} function AutoScroll(obj){ $(obj).find

  • jQuery实现单行文字间歇向上滚动源代码

    使用jQuery实现单行文字间歇向上滚动 效果网址:http://www.keleyi.com/keleyi/phtml/textscroll.htm 本效果加强版:http://www.keleyi.com/a/bjac/532bedbffca1affa.htm 主要增加了光标悬停效果 以下是源代码: 复制代码 代码如下: <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/j

  • c#删除代码中的单行注释行示例

    复制代码 代码如下: using System.IO; using System.Collections; static string deleteComments(string s) //去掉以//开始的注释 { if (s == null) return s; int pos = s.IndexOf("//"); if (pos < 0) return s; return s.Substring(0, pos); }if (Directory.Exists("Tem

  • jquery单行文字向上滚动效果的实现代码

    <body> <div id="title" style="width:100%;height:40px;">看看间断滚动文字</div> <div id="content" class="infocontent"> <div id="top" class="infolist"> <ul> <li>央视3

  • js单行消息滚动代码，可添加无数个

    js单行消息滚动代码，可添加无数个

    滚动最新消息代码 td {font-size: 12px;} 最新消息: var marqueeContent=new Array(); //滚动主题 marqueeContent[0]='学习编程,欢迎访问源码爱好者!'; marqueeContent[1]='精品源代码下载.'; marqueeContent[2]='专注于提供编程源码及素材下载及实例教程.'; marqueeContent[3]='旅行是需要一种心情,更重要的是,需要一种冲动.'; marqueeContent[4]='随

  • javascript 单行文字向上跑马灯滚动显示

    代码如下: =sh/2) o.style.marginTop=0; }else{ clearInterval(t); setTimeout(start,delay); } } setTimeout(start,delay); } // --> 我们 服务器常用软件 百度 浏览器 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

随机推荐