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>

View Code

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;

}

View Code

jq代码方式一

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

 1 $(function (){
 2     show();      //首次触发
 3    var target=$("#inner");
 4    var Timer;
 5    Timer=setInterval(show,7100);   //七秒之后 再调用 setInterval
 6 
 7   })            
 8 
 9 function show(){
10      var obj= $("ul li");
11      var len=obj.length;
12      for(var i=0;i<len;i++){
13        setTimeout((function(para){
14           return function (){
15               obj.eq(para).slideUp("slow",function (){   //隐藏
16                   var li=$(this).clone();                        //先克隆
17                    $(this).parent().append(li.show());    //显示的附加在后面
18                   $(this).remove();                             //再移除这个节点
19                });
20           }
21        })(i),1000*i)
22    }
23 
24 }

View Code

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

jq代码方式二

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

 1 var target=$("#inner");
 2 var Timer;
 3 target.hover(function (){
 4      clearInterval(Timer);    
 5      },function (){
 6      Timer=setInterval(function (){
 7      show2(target);
 8      },3000)
 9      }).trigger("mouseleave");
10 })
11 
12 function show2(obj){
13      var ul=obj.find("ul:first");
14      var liHeight=ul.find("li:first").height();//获取行高；
15      ul.animate({"marginTop":-liHeight+"px"},700,function (){ //整个ul向上移动一个li高度
16     ul.css({marginTop:0}).find("li:first").appendTo(ul);//直接移动到的最后一位；
17 
18     })
19 }

View Code

总结：

完美。

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