jquery实现新闻滚动

首先需要jquery的框架支持（这点博客已经具备了jquery的环境，可以不管），在你想要添加效果的页面里面的<head></head>之间添加如下功能函数：

JavaScript代码

1. <script type="text/javascript">
2. function AutoScroll(obj){
3.         $(obj).find("ul:first").animate({
4.                 marginTop:"-25px"
5.         },500,function(){
6.                 $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
7.         });   
8. }
9. </script>

　　这个就是滚动函数，里面的 marginTop:"-25px" 这个25px为你定义的每一行新闻的高度，一般默认就行！然后再页面中任何位置，就是你想要实现滚动新闻的位置添加新闻的代码：

XML/HTML代码

1. <div id="scrollDiv">  
2.   <ul>  
3.     <li>这是滚动新闻的第一行</li>  
4.     <li>这是滚动新闻的第二行</li>  
5.     <li>这是滚动新闻的第三行</li>  
6.     <li>这是滚动新闻的第四行</li>  
7.     <li>这是滚动新闻的第五行</li>  
8.     <li>这是滚动新闻的第六行</li>  
9.     <li>这是滚动新闻的第七行</li>  
10.     <li>这是滚动新闻的第八行</li>  
11.   </ul>  
12. </div>  

　　注意，这里的 id="scrollDiv"是必须的，最后针对这个div框架添加滚动的效果，就是在页面的最底部，或者<head></head>之间添加：

JavaScript代码

1. <script type="text/javascript">   
2. $(document).ready(function(){   
3. setInterval('AutoScroll("#scrollDiv")',1000)   
4. });   
5. </script>  

　　这里的AutoScroll就是开始添加的功能函数，括号里面的”#scrollDiv“就是滚动新闻的div的id名称，可以自由设置，但这2个地方一定要保持一致！

　　最后对这个div添加css样式代码：

CSS代码

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

　　这样就完成了，更新一下首页即可看到效果了，在给出的效果预览里面还有多行滚动，还有可控制上下滚动的效果，大家可以多尝试一下其他的效果！代码不多，但是效果蛮不错的！可以有很好的用户体验效果！