jQuery实现文字向上滚动

　　在一些网页中，我们会看到有一行或多行文字向上滚动，就像轮播一样。那我们如何实现它呢，现在就开始吧！

　　单行文字

　html代码

 <div id="scrollDiv"> 
      <ul> 
         <li>百度 www.baidu.com</li> 
         <li>脚本之家 www.jb51.net</li> 
         <li>这是公告标题的第三行</li> 
         <li>这是公告标题的第四行</li> 
         <li>这是公告标题的第五行</li> 
         <li>这是公告标题的第六行</li> 
         <li>这是公告标题的第七行</li> 
         <li>这是公告标题的第八行</li> 
      </ul> 
 </div>

 css样式

<style> *{margin:0; padding:0;} #scrollDiv{width: 500px; height: 25px; line-height: 25px;/*这里的height是25px*/ 
 margin:50px auto; overflow:hidden;} #scrollDiv li{height:25px; cursor:pointer;} </style>

jQuery程序

<script src="jquery-1.11.3.js"></script>

  <script>
      function autoscroll(obj){

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//这里的25px是#scrollDiv的高度

          $(obj).find("ul:first").animate({marginTop:"-25px"},1000,function(){
              $(this).css("marginTop","0px").find("li:first").appendTo(this)
           })/*$(this).css("marginTop","0px")这里也许会有人搞不明白，为什么又设为0。因为在ul向上移25px的时候，其第一个li会添加到ul的末尾，如果ul的marginTop不设为0的话，整个ul就会慢慢移出它的父盒子，最后使得它的父盒子变空，实现不了原本想要实现的效果。*/
       }
 $(document).ready(function(){
      setInterval('autoscroll("#scrollDiv")',1500)
 })
</script>

多行文字

这里的html代码同上

css样式

<style> *{margin:0; padding:0;} #scrollDiv{width: 500px; height: 100px; line-height: 25px; 
margin:50px auto; overflow:hidden;}/*这里的height是100px*/ #scrollDiv li{height:25px; cursor:pointer;} </style>

jQuery程序

<script src="jquery-1.11.3.js"></script>
<script>
            function autoscroll(obj){ $(obj).find("ul:first").animate({marginTop:"-100px"},500,function(){ var str=$(this).css("marginTop","0px") for(var i=0;i<4;i++){/*这里的for循环目的是让ul里的前四个li一起添加到ul的末尾，
实现多行文字滚动。i可以根据实际需要而定。*/ str.find("li:first").appendTo(this) } }) } $(document).ready(function(){ setInterval('autoscroll("#scrollDiv")',1500) }) </script>