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;
html滚动效果代码list-style:decimal;
}
.inner li a{
text-decoration:none;
color:#3B5998;
}
View Code
jq代码⽅式⼀
原理：slideUp()--clone()--append()--remove()--传递参数-闭包
1 $(function (){
2    show();      //⾸次触发
3var target=$("#inner");
4var Timer;
5    Timer=setInterval(show,7100);  //七秒之后再调⽤ setInterval
6
7  })
8
9function show(){
10var obj= $("ul li");
11var len=obj.length;
12for(var i=0;i<len;i++){
13        setTimeout((function(para){
14return function (){
15              obj.eq(para).slideUp("slow",function (){  //隐藏
16var 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，不错是⾸选；
1var target=$("#inner");
2var Timer;
3 target.hover(function (){
4      clearInterval(Timer);
5      },function (){
6      Timer=setInterval(function (){
7      show2(target);
8      },3000)
9      }).trigger("mouseleave");
10 })
11
12function show2(obj){
13var ul=obj.find("ul:first");
14var 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
总结：
完美。
如果有必要的话，聪明的你可以把新闻，换成图⽚，就变成图⽚的滚动效果了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。