做了一个通知的消息自动滚动的小功能.
简单找了找资料代码入下:
设定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 之后发现始终是固定的个数,没有琢磨明白.
写下来供战友们实用,也请有更好方法的胸弟不吝分享.如果能帮我把这个疑问解决一下就更好了~