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实现的上下滚动公告栏详细讲解
之前做项目的时候,一直都想着做一个上下滚动的公告栏,作为展示网站的最新公告信息,因为刚开始自己的思路并不是太清晰,在网上找了很多的源码,但是却发现都不能让自己满意,有的还会出现一些小问题,比如,有时候 ...
随机推荐
- nutch 采集到的数据与实际不符
现象,这个网站我总计能抽取将近500个URL,但实际只抽取了100条 解析:nutch默认从一个页面解析出的链接,只取前 100 个. <property> <name>db. ...
- Linux中tty、pty、pts的概念区别
转自Linux中tty.pty.pts的概念区别 基本概念: 1> tty(终端设备的统称): tty一词源于Teletypes,或者teletypewriters,原来指的是电传打字机,是通过 ...
- CSS使块半透明方法,兼容IE6
前言 今天LOL玩机器人玩得真心不爽,实在崩溃,还是逛博客园比较爽些,记录自己的成长!说句实话我在编程方面确实是个菜鸟,菜到一种超神的地步,没一样自己特擅长的,悲催...... 废话少说,进入正题,H ...
- Asp.Net中的三种分页方式
Asp.Net中的三种分页方式 通常分页有3种方法,分别是asp.net自带的数据显示空间如GridView等自带的分页,第三方分页控件如aspnetpager,存储过程分页等. 第一种:使用Grid ...
- DHTMLX 前端框架 建立你的一个应用程序 教程(八)-- 添加表单Form
添加表单Form 我们下一步是在页面中添加一个表单,表格中的选中字段将会显示在表单中.提供一个提交按钮 可以对显示的数据进行修改提交. 添加表单到布局单元格中 1.在右侧布局中使用attachForm ...
- java web路径的问题
对于<form action="/xx"> 和 <a href='/xx'> 其中,xx相应的为网站根目录 一般网站为虚拟目录,所以要 写成 /web应 ...
- Deep Learning Overview
[Ref: http://en.wikipedia.org/wiki/Deep_learning] Definition: a branch of machine learning based on ...
- 利用URLRewriter重写url地址
首先,当然是下载URLRewriter了 download.microsoft.com/download/0/4/6/0463611e-a3f9-490d-a08c-877a83b797cf/MSDN ...
- How to: Hide the Ribbon in SharePoint 2010
转:http://blogs.msdn.com/b/sharepointdev/archive/2012/04/30/how-to-hide-the-ribbon-in-sharepoint-2010 ...
- android 利用数字证书对程序签名
签名的必要性 1. 防止你已安装的应用被恶意的第三方覆盖或替换掉. 2. 开发者的身份标识,签名可以防止抵赖等事件的发生. 开发Android的人这么多,完全有可能大家都把类名,包名起成了一个同样 ...