實現通知標題自動滾動

標籤：

做了一個通知的訊息自動滾動的小功能.

簡單找了找資料代碼入下:

設定div的高度和要滾動通知標題的高度相同,這裡是25px.

<style type="text/css"> ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} </style> 

 顯示代碼:需要顯示的通知標題,當然可以給li加入理想的樣式.或者超連結標籤

<div id="scrollDiv" style="border:0px solid #000">    <ul>         <li>通知1</li>         <li>通知2</li>         <li>通知3</li>    </ul></div>    

 實現自動滾的js方法:

<script type="text/javascript">     function AutoScroll(obj){         $(obj).find("ul:first").animate({         marginTop:"-25px"         },500,function(){         $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);         });     }     $(document).ready(function(){         setInterval(‘AutoScroll("#scrollDiv")‘,2000);    }); </script>

實現後的效果:

　　達到了簡單實用的效果,不過今天回頭看了看,產生了一個疑問:回呼函數 $(this).css({marginTop:"0px"}).find("li:first").appendTo(this); 一直appendTo(),會不會出現ul標籤下的li不斷增加的? F12 之後發現始終是固定的個數,沒有琢磨明白.

　　寫下來供戰友們實用,也請有更好方法的胸弟不吝分享.如果能幫我把這個疑問解決一下就更好了~

 

實現通知標題自動滾動