一行多列文字循环向上滚动带停顿-网页特效-懒人建站

一行多列文字循环向上滚动带停顿

一行多列文字循环向上滚动JS代码，滚动后有短暂停顿。特别适合做新闻公告之类。JS代码很少，UL/LI结构，符合W3C标准。

<!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>

单，焦点幻灯片代码，原创视频教程与网页模板和CSS技巧。" />
<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://51xuediannao.com" target="_blank">jQuery 类似腾讯网的图片幻灯特效（

可自动播放）</a></li><li><a href="http://51xuediannao.com/JS" target="_blank">VB版增强型

Windows任务管理器</a></li><li><a href="http://51xuediannao.com/JS/texiao"

target="_blank">JQuery Tip多风格链接提示框</a></li><li><a href="http://51xuediannao.com/JS/ad"

target="_blank">VC++动态加载、调用smtp.dll发邮件示例</a></li><li><a

href="http://51xuediannao.com/html+css" target="_blank">VC++连连看游戏源码附外挂

</a></li><li><a href="http://51xuediannao.com/" target="_blank">基于API的VB HOOK钩子拦截程序

</a></li><li><a href="http://51xuediannao.com/" target="_blank">VB 操作系统的一些常用小技巧集

</a></li><li><a href="http://51xuediannao.com/js" target="_blank">xTree 标准的WEB菜单树（树形

菜单）</a></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>

<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-

size:10pt; line-height:150%;">
<span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理 我

要学电脑.COM →51xuediannao.com</a> </span><br>
<a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a><br /><br/>
<span>我们为您提供-
<a href="http://www.51xuediannao.com/html+css/">HTML+CSS模板</a>，
<a href="http://www.51xuediannao.com/js/">JS代码</a>，
<a href="http://www.51xuediannao.com/JS/texiao/">网页特效</a>，

<a href="http://www.51xuediannao.com/JS/nav/">导航菜单</a>，
<a href="http://www.51xuediannao.com/JS/Slide/">焦点幻灯片<a>，
<a href="http://www.51xuediannao.com/JS/show/">网页欣赏</a>和
<a href="http://www.51xuediannao.com/JS/jiqiao/css/">CSS技巧</a>；</span><br />
<span>懒人建站只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
</div>
</BODY>
</HTML>

代码说明:

一行多列文字循环向上滚动 JS代码，滚动后有短暂停顿。特别适合做新闻公告之类。JS代码很少，UL/LI结构，符合W3C标准。

TAG标签

弹出层 jQuery 图片展示下拉菜单左右滚动选项卡二级导航 jQuery弹出层

来源：懒人建站|发布人：懒人建站|2010-04-13|热度：次|收藏|报错