文字向上滚动效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns=" http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gbk">
<style type="text/css">
ul {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
padding-top: 0px
}
#announcement {
width:100%;
background:url(img/menu_bg.gif) repeat;
overflow: hidden;
}
#announcement div {
border: #e6e6e6 1px solid;
padding:0px 10px 0px 10px;
overflow-y:hidden;
line-height: 24px;
height: 24px
}
#announcement li {
font-size: 12px;
float: left;
list-style-type: none;
margin-right: 20px;
padding-left: 10px;
background: url(img/arrow_right.gif) no-repeat 0px 50%;
white-space: nowrap
}
#announcement a {
text-decoration: none;
}
#announcement a:hover {
text-decoration:underline;
}
</style>
</HEAD>
<BODY>
<DIV id=announcement onMouseOver="if(!anncount) {clearTimeout(annst);annst = 0}" onMouseOut="if(!annst) annst = setTimeout('announcementScroll()', anndelay);">
<DIV id=announcementbody>
<UL>
<LI><A href=" http://www.你的网址.com" target="_blank">分享个表单验证函数</A>(2008-12-16 05:30 P.M.)</LI>
<LI><A href="http://你的网址.com" target="_blank">块级元素和级联元素的含义</A>(2008-12-13 03:39 P.M.)</LI>
<LI><A href=" http://www.你的网址.com" target="_blank">如何设置<span>的width属性且不换行??</A>(2008-12-13 03:23 P.M.)</LI>
<LI><A href=" http://www.你的网址.com" target="_blank">执行javascript后,gif动画就静止了??</A>(2008-12-13 03:12 P.M.)</LI>
<LI><A href=" http://www.你的网址.com" target="_blank">基于栅格地图的查询系统(切片缓存技术)</A>(2008-11-29 07:38 P.M.)</LI>
<LI><A href=" http://js.你的网址.com" target="_blank">【转】flash和javascript之间的通讯(javascript调用flash中的函数)</A>(2008-11-27 07:45 P.M.)</LI>
<LI><A href=" http://www.你的网址.com" target="_blank">不使用循环和回调函数输出字符1~100</A>(2008-11-23 03:00 P.M.)</LI>
<LI><A href=" http://tool.你的网址.com" target="_blank">简洁的js图片等比缩放</A>(2008-11-22 04:54 P.M.)</LI>
<LI><A href=" http://www.你的网址.com" target="_blank">分贝网音乐地址获取器</A>(2008-11-20 05:19 P.M.)</LI>
</UL>
</DIV>
</DIV>
<script type="text/javascript">
function $(id)
{
return document.getElementById(id);
}
var anndelay = 3000;
var anncount = 0;
var annheight = 24;
var annst = 0;
function announcementScroll()
{
if( ! annst)
{
$('announcementbody').innerHTML += '<br style="clear: both" />' + $('announcementbody').innerHTML;
$('announcementbody').scrollTop = 0;
if($('announcementbody').scrollHeight > annheight * 3)
{
annst = setTimeout('announcementScroll()', anndelay);
}
else
{
$('announcement').onmouseover = $('announcement').onmouseout = null;
}
return;
}
if(anncount == annheight)
{
if($('announcementbody').scrollHeight - annheight <= $('announcementbody').scrollTop)
{
$('announcementbody').scrollTop = $('announcementbody').scrollHeight / 2 - annheight;
}
anncount = 0;
annst = setTimeout('announcementScroll()', anndelay);
}
else
{
$('announcementbody').scrollTop ++ ;
anncount ++ ;
annst = setTimeout('announcementScroll()', 10);
}
}
announcementScroll();
</script>
</BODY>
</HTML>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值