js:

// JavaScript Document
function b(){
t = parseInt(x.css('top'));
y.css('top','19px');
x.animate({top: t - 19 + 'px'},'slow'); //19为每个li的高度
if(Math.abs(t) == h-19){ //19为每个li的高度
y.animate({top:'0px'},'slow');
z=x;
x=y;
y=z;
}
setTimeout(b,3000);//滚动间隔时间 现在是3秒
}
$(document).ready(function(){
$('.swap').html($('.news_li').html());
x = $('.news_li');
y = $('.swap');
h = $('.news_li li').length * 19; //19为每个li的高度
setTimeout(b,2000);//滚动间隔时间 现在是3秒

})

css:

*{ padding:0; margin:0; font-size:12px}
ul,li{ list-style:none;}
.box{ height:35px; background:#000; overflow:hidden;}
.t_news{ height:19px; background:url(../images/icon_top.png) 0 -88px no-repeat; color:red; padding-left:10px; margin:8px 0; overflow:hidden; position:relative;}
.t_news b{ line-height:19px; font-weight:bold; display:inline-block;}
.news_li,.swap{ line-height:19px; display:inline-block; position:absolute; top:0; left:72px;}
.news_li a,.swap a{ color:red;}
.swap{top:19px;}

html:

<div class="t_news">
<b>网站公告:</b>
<ul class="news_li">
<li><a href="#" target="_blank">要显示的内容</a></li>
</ul>
<ul class="swap"></ul>
</div>

jquery实现公告上下滚动显示的更多相关文章

  1. HTML+JS实现网站公告信息滚动显示

    一.可以直接使用marquee标签来实现 注意: 这个标签首先在早期的IE版本中加进来,后来逐渐被其他浏览器支持,W3C的不建议使用它. <marquee>在HTML和HTML5中都属于废 ...

  2. jQuery实现公告文字左右滚动

    jQuery实现公告文字左右滚动的代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  3. Jquery控制滚动显示欢迎字幕v2

    Jquery控制滚动显示欢迎字幕v2: 之前做的那个比较适合测试环境,但要套入到网站中,有两个按钮在那摆着,还是不太好看.后面对代码进行了修改,如下: 参考代码: <html> <h ...

  4. Jquery实现滚动显示欢迎字幕效果

    Jquery控制滚动显示欢迎字幕: 参考代码: <!DOCTYPE html> <html> <head> <title>Colin Marquee W ...

  5. jquery垂直公告滚动实现代码

    公告滚动想必大家都有见到过吧,实现方法也有很多,下面为大家介绍使用jquery实现垂直公告滚动,感兴趣的朋友不要错过 复制代码代码如下: <!DOCTYPE html PUBLIC " ...

  6. jquery 上下滚动显示隐藏

      function scroll(fn) { var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; win ...

  7. Jquery实现图片左右滚动(自动)

    <!DOCTYPE HTML><html><head><title>基于jQuery的控制左右滚动效果_自动滚动版本</title>< ...

  8. jQuery 顶部导航尾随滚动,固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  9. jQuery实现的上下滚动公告栏详细讲解

    之前做项目的时候,一直都想着做一个上下滚动的公告栏,作为展示网站的最新公告信息,因为刚开始自己的思路并不是太清晰,在网上找了很多的源码,但是却发现都不能让自己满意,有的还会出现一些小问题,比如,有时候 ...

随机推荐

  1. 学无止境,学习AJAX(二)

    POST 请求 一个简单 POST 请求: xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send(); ...

  2. 调试Android USB遇到的令人费解的问题

    上周参照网上代码,做了USB的初步探测程序,工作正常 .今天从硬件部拿到了一段例程,原本打算参考它来完善自己的程序.但运行之后总是报错,逐步跟进错误,进而发现了一个匪疑所思的问题.调试一天也未发现原因 ...

  3. 万能脚本助Web执行底层Linux命令

    需求分析: 这里先要说明的是,这一篇不是QT系列的文章,而是关于Web的,之所以要写这篇,是因为以前做Web相关开发的时候,经常涉及到与linux底层命令打交道,比如说创建一个目录,删除一个目录,或者 ...

  4. 二层安全之MAC Flooding解析与解决方法

    一.了解MAC Flooding原理 1.1 如图所示,网络中有3个PC和一个交换机,在正常情况下,如果PC A向PC B发送信息,PC C是不会知道的,过程都通过中间的交换机进行透明的处理,并且会记 ...

  5. 浅析Android的窗口

    一.窗口的概念 在开发过程中,我们经常会遇到,各种跟窗口相关的类,或者方法.但是,在 Android 的框架设计中,到底什么是窗口?窗口跟 Android Framework 中的 Window 类又 ...

  6. Spring事务传播机制

    Spring在TransactionDefinition接口中规定了7种类型的事务传播行为,它们规定了事务方法和事务方法发生嵌套调用时事务如何进行传播,即协调已经有事务标识的方法之间的发生调用时的事务 ...

  7. leetcode面试准备:Reverse Words in a String

    leetcode面试准备:Reverse Words in a String 1 题目 Given an input string, reverse the string word by word. ...

  8. vi/vim 基本使用

    摘要: 在minicom终端里修改开发板中的文件时,必须要用到vi,因为开发板中并不像开发主机那样,有gedit和kscope这样的编辑器:还有,即便是在开发主机上,也会经常用到vi,因为vi使用起来 ...

  9. HTML本地测试成功后上传博客注意事项

    需要注意不要跟博客已经存在的样式(CSS)或功能(JavaScript)起冲突 功能名一定不要一样 样式名尽量不一样 如果样式名一样,存在属性名的对应属性值尽量跟博客内相同

  10. URAL(DP集)

    这几天扫了一下URAL上面简单的DP 第一题 简单递推 1225. Flags #include <iostream> #include<cstdio> #include< ...