JQ实现新闻滚动条效果(跑马灯)

先看效果：

            

HTML代码

<div class="outer" id="outer">
    <h3>最新公告</h3>
       <div class="inner" id="inner">
             <ul>
                <li><a href="#" title="">星期一不上班</a></li>
                <li><a href="#" title="">星期二不上班</a></li>
                <li><a href="#" title="">星期三不上班</a></li>
               <li><a href="#" title="">星期四不上班</a></li>
               <li><a href="#" title="">星期五不上班</a></li>
               <li><a href="#" title="">星期六发工资</a></li>
               <li><a href="#" title="">星期天发奖金</a></li>
             </ul>
     </div>
</div>

Css代码

.outer{
   width:200px;
   border:1px solid #AAAAAA;
   margin:10px;
}
.inner{
   width:200px; height:85px;
   line-height:20px;
  overflow:hidden; background:#FFFFFF; 
}
h3{
   height:26px;
   background:#3B5998;
   color:white;
  line-height:26px;
  text-indent:6px;
  margin:0px;
}
  .inner li{
  height:21px;

}
.inner ul{
  margin:0px;
  list-style:decimal; 
}
.inner li a{
  text-decoration:none;
  color:#3B5998;

}

jq代码方式一

      原理：slideUp()--clone()--append()--remove()--传递参数-闭包           

$(function (){
    show();      //首次触发
   var target=$("#inner");
   var Timer;
   Timer=setInterval(show,7100);   //七秒之后 再调用 setInterval

  })            

function show(){
     var obj= $("ul li");
     var len=obj.length;
     for(var i=0;i<len;i++){
       setTimeout((function(para){
          return function (){
              obj.eq(para).slideUp("slow",function (){   //隐藏
                  var li=$(this).clone();                        //先克隆
                   $(this).parent().append(li.show());    //显示的附加在后面
                  $(this).remove();                             //再移除这个节点
               });
          }
       })(i),1000*i)
   }

}

     缺陷：无法应用到我们的hover中滴呀

jq代码方式二 

     原理，不需要传递参数，也就不用闭包，而且支持hover，不错 是首选；

var target=$("#inner");
var Timer;
target.hover(function (){
     clearInterval(Timer);    
     },function (){
     Timer=setInterval(function (){
     show2(target);
     },3000)
     }).trigger("mouseleave");
})

function show2(obj){
     var ul=obj.find("ul:first");
     var liHeight=ul.find("li:first").height();//获取行高；
     ul.animate({"marginTop":-liHeight+"px"},700,function (){ //整个ul向上移动一个li高度
    ul.css({marginTop:0}).find("li:first").appendTo(ul);//直接移动到的最后一位；

    })
}

总结：

      完美。

      如果有必要的话，聪明的你可以把新闻，换成图片，就变成图片的滚动效果了。