增强型走马灯公告栏，可以抛弃marquee标签了

1.Html代码： 

<div id="container">
    <ul class="noticeList">
        <li><a href="" title="Wordpress:将文章自动显示为两列">Wordpress:将文章自动显示为两列</a></li>
        <li><a href="" title="电影:《2012》真的有那一天吗？探索频道为你揭露">电影:《2012》真的有那一天吗？探索频道为你揭露</a></li>
        <li><a href="" title="资讯:2009年11月编程语言排行榜">资讯:2009年11月编程语言排行榜</a></li>
        <li><a href="" title="租房:忙碌一周，房子终于搞定">租房:忙碌一周，房子终于搞定</a></li>
        <li><a href="" title="主题:我的第三个主题innerNews提供下载">主题:我的第三个主题innerNews提供下载</a></li>
        <li><a href="" title="插件:我的第一个插件–简约的scrollTop滑动插件">插件:我的第一个插件–简约的scrollTop滑动插件</a></li>
        <li><a href="" title="PageRank:庆贺我的博客PR连升3级">PageRank:庆贺我的博客PR连升3级</a></li>
        <li><a href="" title="软件:MyEclipse 8.0发布，附注册码">软件:MyEclipse 8.0发布，附注册码</a></li>
        <li><a href="" title="电视:《冷箭》，让我“失眠”的谍战片">电视:《冷箭》，让我“失眠”的谍战片</a></li>
        <li><a href="" title="下载:高清，是一种态度！">下载:高清，是一种态度！</a></li>
    </ul>
</div>

2.CSS代码： 

* { margin:0; padding:0;}
body { font:12px Verdana, Geneva, sans-serif; color:#666; text-align:center;}
 
#container { width:180px; margin:30px auto; text-align:left; padding:10px; border:1px solid #ccc; height:250px; position:relative; overflow:hidden;}
 .noticeList { width:180px; list-style:inside; position:absolute; top:270px; left:10px;}
 .noticeList li { padding-bottom:5px;}
 .noticeList li a { color:#606060; text-decoration:none;}
 .noticeList li a:hover { color:#09F;}

3.代码：（备了部分注释，不懂的可以留言询问。）

jQuery(function($) {
 function ScrollAction(listObj, listElem, speed, isSeries) { //listObj为需要滚动的列表，  speed为滚动速度
  var pos, top, aniTop, height;
  var id = '';  //记录setInterval的标记id
 
  pos = listObj.position(); 
  top = pos.top;   //列表的top
  aniTop = top;    //记录当前运动时的top
  height = listObj.height(); //列表的高度
 
  var scrollUp = function() {
   aniTop--;
   if(!isSeries) { //isSeries变量控制是否连续滚动，false不连续，true连续
    if(aniTop == -height) { //不连续，滚动玩重新滚动
     listObj.css({'top': top});
     aniTop = top;
    };
   } else {
    if(aniTop == -listObj.children().eq(0).height()) { //连续滚动
     var firstItem = '< ' + listElem +'>' + listObj.children().eq(0).html() + '< /' + listElem +'>';
     listObj.children().eq(0).remove();
     listObj.append(firstItem);
     aniTop = 4;
    };
   };
   listObj.css({'top': aniTop + 'px'});
  };
 
  var hover = function(id) {
   listObj.hover(function() {
    clearInterval(id);
   }, function() {
    id = setInterval(scrollUp, speed);
   });
  };
 
  this.start = function() {
   id = setInterval(scrollUp, speed);
   hover(id);
  };
 
 };
 var sa = new ScrollAction($('.noticeList'), 'li', 30, true);
 sa.start();
});