jquery实现公告上下滚动显示
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实现公告上下滚动显示的更多相关文章
- HTML+JS实现网站公告信息滚动显示
一.可以直接使用marquee标签来实现 注意: 这个标签首先在早期的IE版本中加进来,后来逐渐被其他浏览器支持,W3C的不建议使用它. <marquee>在HTML和HTML5中都属于废 ...
- jQuery实现公告文字左右滚动
jQuery实现公告文字左右滚动的代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
- Jquery控制滚动显示欢迎字幕v2
Jquery控制滚动显示欢迎字幕v2: 之前做的那个比较适合测试环境,但要套入到网站中,有两个按钮在那摆着,还是不太好看.后面对代码进行了修改,如下: 参考代码: <html> <h ...
- Jquery实现滚动显示欢迎字幕效果
Jquery控制滚动显示欢迎字幕: 参考代码: <!DOCTYPE html> <html> <head> <title>Colin Marquee W ...
- jquery垂直公告滚动实现代码
公告滚动想必大家都有见到过吧,实现方法也有很多,下面为大家介绍使用jquery实现垂直公告滚动,感兴趣的朋友不要错过 复制代码代码如下: <!DOCTYPE html PUBLIC " ...
- jquery 上下滚动显示隐藏
function scroll(fn) { var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; win ...
- Jquery实现图片左右滚动(自动)
<!DOCTYPE HTML><html><head><title>基于jQuery的控制左右滚动效果_自动滚动版本</title>< ...
- jQuery 顶部导航尾随滚动,固定浮动在顶部
jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...
- jQuery实现的上下滚动公告栏详细讲解
之前做项目的时候,一直都想着做一个上下滚动的公告栏,作为展示网站的最新公告信息,因为刚开始自己的思路并不是太清晰,在网上找了很多的源码,但是却发现都不能让自己满意,有的还会出现一些小问题,比如,有时候 ...
随机推荐
- android 界面布局 很好的一篇总结[转]
1.LinearLayout ( 线性布局 ) :(里面只可以有一个控件,并且不能设计这个控件的位置,控件会放到左上角) 线性布局分为水平线性和垂直线性二者的属性分别为:android:orienta ...
- word-wrap同word-break的区别(转)
本文列举了兼容 IE 和 FF 的换行 CSS 推荐样式,详细介绍了word-wrap同word-break的区别. 兼容 IE 和 FF 的换行 CSS 推荐样式 最好的方式是 word-wrap: ...
- POJ 1236 Network of Schools[连通分量]
题目链接:http://poj.org/problem?id=1236题目大意:给出N台电脑,电脑间单向连通传送文件问题1.网络中最少放几个文件保证所有电脑都能接受到文件问题2.最少向网络中加几条线保 ...
- memcached源代码包下载
先下载libevent https://github.com/downloads/libevent/libevent/libevent-2.0.18-stable.tar.gz 再下载memcache ...
- ZOJ 3705 Applications
点我看题目 题意 : 真是一道又臭又长的模拟题啊,不过比赛的时候没看,赛完了补的. 给你N个候选人,让你从中选M个候选人,根据四个大规则来确定每个人的分数,然后选分数前M个人的输出. 1.在MOJ上做 ...
- 万能脚本助Web执行底层Linux命令
需求分析: 这里先要说明的是,这一篇不是QT系列的文章,而是关于Web的,之所以要写这篇,是因为以前做Web相关开发的时候,经常涉及到与linux底层命令打交道,比如说创建一个目录,删除一个目录,或者 ...
- 批量生成卡号密码的php程序
<?php header('Content-Type:text/html; charset=utf-8'); function MakeCard() { set_time_limit(0); / ...
- 坑爹的libxml2 for mingw 编译
按照官方的readerme.txt说法生成Makefile之后,你会发现编译时候需要创建几个文件夹. 还有就是因为宏定义问题,报错,需要在config.h中加入#define HAVE_STDINT_ ...
- bzoj1565
很明显是最大权闭合子图,但要注意互相保护的植物打不掉,被互相保护的植物所直接或间接保护的植物也打不掉我们先拓扑排序然后dfs出能打掉的点,然后做最大权闭合子图 ; type node=record p ...
- Apache设置防DDOS模块mod_evasive
mod_evasive 是Apache(httpd)服务器的防DDOS的一个模块.对于WEB服务器来说,是目前比较好的一个防护DDOS攻击的扩展模块.虽然并不能完全防御 DDOS攻击,但在一定条件下, ...