先看效果:
HTML代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.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()--传递参数-闭包
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 }
缺陷:无法应用到我们的hover中滴呀
jq代码方式二
原理,不需要传递参数,也就不用闭包,而且支持hover,不错 是首选;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 }
总结:
完美。
如果有必要的话,聪明的你可以把新闻,换成图片,就变成图片的滚动效果了。