设为首页收藏本站新闻投稿

MOD中国同盟社

 找回密码
 注册

QQ登录

只需一步,快速开始

搜索
查看: 657|回复: 1

[教程] jQuery循环滚动新闻列表 [复制链接]

Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20

帖子
2836
精华
2
声望
12984 点
金币
2999 Mold
被赞许
28 次
注册时间
2006-4-28

Mod中国同盟社至高荣誉

发表于 2011-7-28 10:16:27 |显示全部楼层
  1. <style type="text/css">
  2. ul,li{margin:0;padding:0}
  3. #scrollDiv{width:300px;height:50px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
  4. #scrollDiv li{height:50px;padding-left:10px;}
  5. </style>
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8. function AutoScroll(obj){
  9. $(obj).find("ul:first").animate({
  10. marginTop:"-50px"
  11. },500,function(){
  12. $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
  13. });
  14. }
  15. $(document).ready(function(){
  16. setInterval('AutoScroll("#scrollDiv")',5000)
  17. });
  18. </script>

  19. <div id="scrollDiv">
  20. <ul>
  21. <li>这是公告标题的第一行<br />
  22. dfgsdfgsdfgsdfgs</li>
  23. <li>这是公告标题的第二行<br />
  24. dfgsdfgsdfgsdfgs</li>
  25. <li>这是公告标题的第三行<br />
  26. dfgsdfgsdfgsdfgs</li>
  27. <li>这是公告标题的第四行<br />
  28. dfgsdfgsdfgsdfgs</li>
  29. <li>这是公告标题的第五行</li>
  30. <li>这是公告标题的第六行</li>
  31. <li>这是公告标题的第七行</li>
  32. <li>这是公告标题的第八行</li>
  33. </ul>
  34. </div>
复制代码

使用道具 举报

Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20

帖子
2836
精华
2
声望
12984 点
金币
2999 Mold
被赞许
28 次
注册时间
2006-4-28

Mod中国同盟社至高荣誉

发表于 2011-7-28 10:20:47 |显示全部楼层
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>多行滚动jQuery循环新闻列表代码</title>
  6. <style type="text/css">
  7. ul,li{margin:0;padding:0}
  8. #scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
  9. #scrollDiv li{height:25px;padding-left:10px;}
  10. </style>
  11. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
  12. <script type="text/javascript">
  13. //滚动插件
  14. (function($){
  15. $.fn.extend({
  16.         Scroll:function(opt,callback){
  17.                 //参数初始化
  18.                 if(!opt) var opt={};
  19.                 var _this=this.eq(0).find("ul:first");
  20.                 var        lineH=_this.find("li:first").height(), //获取行高
  21.                         line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数,默认为一屏,即父容器高度
  22.                         speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度,数值越大,速度越慢(毫秒)
  23.                         timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔(毫秒)
  24.                 if(line==0) line=1;
  25.                 var upHeight=0-line*lineH;
  26.                 //滚动函数
  27.                 scrollUp=function(){
  28.                         _this.animate({
  29.                                 marginTop:upHeight
  30.                         },speed,function(){
  31.                                 for(i=1;i<=line;i++){
  32.                                         _this.find("li:first").appendTo(_this);
  33.                                 }
  34.                                 _this.css({marginTop:0});
  35.                         });
  36.                 }
  37.                 //鼠标事件绑定
  38.                 _this.hover(function(){
  39.                         clearInterval(timerID);
  40.                 },function(){
  41.                         timerID=setInterval("scrollUp()",timer);
  42.                 }).mouseout();
  43.         }        
  44. })
  45. })(jQuery);

  46. $(document).ready(function(){
  47.         $("#scrollDiv").Scroll({line:4,speed:500,timer:1000});
  48. });
  49. </script>
  50. </head>

  51. <body>
  52. <p>多行滚动演示:</p>
  53. <div id="scrollDiv">
  54.   <ul>
  55.     <li>这是公告标题的第一行</li>
  56.     <li>这是公告标题的第二行</li>
  57.     <li>这是公告标题的第三行</li>
  58.     <li>这是公告标题的第四行</li>
  59.     <li>这是公告标题的第五行</li>
  60.     <li>这是公告标题的第六行</li>
  61.     <li>这是公告标题的第七行</li>
  62.     <li>这是公告标题的第八行</li>
  63.   </ul>
  64. </div>
  65. </body>
  66. </html>
  67. ***请再次刷新查看效果,或保存到本地浏览***
复制代码

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

回顶部