码迷,mamicode.com
首页 > Web开发 > 详细

jquery实现公告上下滚动显示

时间:2015-11-05 10:46:33      阅读:497      评论:0      收藏:0      [点我收藏+]

标签:

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实现公告上下滚动显示

标签:

原文地址:http://www.cnblogs.com/luoxiaolei/p/4938549.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!