css+js实现的Li列表单行多列无缝循环滚动效果-文本操作-代码家园

<HTML >
<HEAD>
<TITLE>css+js实现的Li列表单行多列无缝循环<a href='http://www.daimajiayuan.com/list-97.html' target='_blank'><u>滚动效果</u></a></TITLE>
<style type="text/css">
ul {
 padding-right: 0px;
 padding-left: 0px;
 padding-bottom: 0px;
 margin: 0px;
 padding-top: 0px
}
#announcement {
 width:100%;
 background:url() 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() 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="#nogo">CSS3图片手风琴效果</a></li>
     <li><a href="#nogo">国外的CSS3叠加效果</a></li>
     <li><a href="#nogo">dbexpress与元数据的Delphi结合实例</a></li>
     <li><a href="#nogo">使用Delphi开发高效的<a href='http://www.daimajiayuan.com/sitejs-5645-1.html' target='_blank'><u>数据库</u></a>应用系统（实例源码）</a></li>
     <li><a href="#nogo">CSS3网页平滑滚动过渡动画效果</a></li>
     <li><a href="#nogo">C#使用FileSystemWatcher组件监视系统日志文件是否被更改</a></li>
     <li><a href="#nogo">CSS3+jQuery完成3D缩略图悬浮提示效果</a></li>
     <li><a href="#nogo">jQuery与Js实现屏幕蒙层效果，Div层窗口</a></li>
     <li><a href="#nogo">Java 记事本源码+程序</a></li>
     <li><a href="#nogo">VC++视频目标检测演示框架【源代码】</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>
</BODY>
</HTML>

<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.daimajiayuan.com">代码家园</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>

提示：可以先修改部分代码后再运行

转载请注明：代码家园 » css+js实现的Li列表单行多列无缝循环滚动效果

相关代码