实现通知标题自动滚动

标签：

做了一个通知的消息自动滚动的小功能.

简单找了找资料代码入下:

设定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 之后发现始终是固定的个数,没有琢磨明白.

　　写下来供战友们实用,也请有更好方法的胸弟不吝分享.如果能帮我把这个疑问解决一下就更好了~

实现通知标题自动滚动

标签：

原文地址：http://www.cnblogs.com/clovem/p/5540077.html