jquery 解释多行滚动

在网上可以随处找到这段代码，但是没有任何人解释这段代码，只要自己研究好久。

 

代码

  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 > 无标题文档 < / 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 type = " text/javascript "  src = " jquery-1.1.3.pack.js " >< / script>
 12  < script type = " text/javascript " >
 13  ( function ($){
 14  $.fn.extend({
 15          Scroll: function (opt,callback){
 16                   // 参数初始化
 17                   if ( ! opt)  var  opt = {};
 18                   var  _btnUp  =  $( " # " +  opt.up); // Shawphy:向上按钮
 19                   var  _btnDown  =  $( " # " +  opt.down); // Shawphy:向下按钮
 20                   var  timerID;
 21                   var  _this = this .eq( 0 ).find( " ul:first " );
 22                   var      lineH = _this.find( " li:first " ).height(),  // 获取行高
 23          
 24                          line = opt.line ? parseInt(opt.line, 10 ):parseInt( this .height() / lineH,10),  // 每次滚动的行数，默认为一屏，
 25 
 26  即父容器高度
 27                          speed = opt.speed ? parseInt(opt.speed, 10 ): 500 ;  // 卷动速度，数值越大，速度越慢（毫秒）
 28                          timer = opt.timer  // ?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
 29 
 30                   if (line == 0 ) line = 1 ;
 31                   var  upHeight = 0 - line * lineH;
 32 
 33                   // 滚动函数
 34                   var  scrollUp = function (){
 35                          _btnUp.unbind( " click " ,scrollUp);  // Shawphy:取消向上按钮的函数绑定
 36                          _this.animate({
 37                                  marginTop:upHeight
 38                          },speed, function (){
 39                                   for (i = 1 ;i <= line;i ++ ){
 40                                          _this.find( " li:first " ).appendTo(_this);
 41                                  }
 42                                  _this.css({marginTop: 0 });
 43                                  _btnUp.bind( " click " ,scrollUp);  // Shawphy:绑定向上按钮的点击事件
 44                          });
 45 
 46                  }
 47                   // Shawphy:向下翻页函数
 48                   var  scrollDown = function (){
 49         
 50                          _btnDown.unbind( " click " ,scrollDown);
 51                           for (i = 1 ;i <= line;i ++ ){
 52                                  _this.find( " li:last " ).show().prependTo(_this);
 53                          }
 54                          _this.css({marginTop:upHeight});
 55                          _this.animate({
 56                                  marginTop: 0
 57                          },speed, function (){
 58                                  _btnDown.bind( " click " ,scrollDown);
 59                          });
 60                  }
 61                  // Shawphy:自动播放
 62                   var  autoPlay  =   function (){
 63                           if (timer)timerID  =  window.setInterval(scrollUp,timer);
 64                  };
 65                   var  autoStop  =   function (){
 66                           if (timer)window.clearInterval(timerID);
 67                  };
 68                    // 鼠标事件绑定
 69                  _this.hover(autoStop,autoPlay).mouseout();
 70                  _btnUp.css( " cursor " , " pointer " ).click( scrollUp ).hover(autoStop,autoPlay); // Shawphy:向上向下鼠标事件绑定
 71                  _btnDown.css( " cursor " , " pointer " ).click( scrollDown ).hover(autoStop,autoPlay);
 72 
 73          }       
 74  })
 75  })(jQuery);
 76 
 77  $(document).ready( function (){
 78          $( " #scrollDiv " ).Scroll({line: 4 ,speed: 500 ,timer: 3000 ,up: " btn2 " ,down: " btn1 " });
 79  });
 80  < / script>
 81  < / head>
 82 
 83  < body >
 84  < p > 多行滚动演示： < / p>
 85  < div id = " scrollDiv " >
 86     < ul >
 87       < li > 这是公告标题的第一行 < / li>
 88       < li > 这是公告标题的第二行 < / li>
 89       < li > 这是公告标题的第三行 < / li>
 90       < li > 这是公告标题的第四行 < / li>
 91       < li > 这是公告标题的第五行 < / li>
 92       < li > 这是公告标题的第六行 < / li>
 93       < li > 这是公告标题的第七行 < / li>
 94       < li > 这是公告标题的第八行 < / li>
 95     < / ul>
 96  < / div>
 97 
 98  < span id = " btn1 " > down < / span>
 99  < br / >
100  < span id = " btn2 " > up < / span>
101  102 
103  件
104  < / body>
105  < / html>

 

这段代码只是多行滚动。

1。首先一个<div id="scrollDiv">高度限制是100px，而每行是25px，总共只能显示4行，但div中有八行。那怎么显示呢？

scrollDiv属性中有个overflow:hidden表示不能显示的则隐藏。

2。第二个问题是 哪四行显示在<div id="scrollDiv">中，由于_this.find("li:first").appendTo(_this);将前面的四行剪切插入到后面，并且设置高度是从0开始，这样就只能显示前四行。_this.find("li:last").show().prependTo(_this);同理将后面四行插入到前面去。

3。第三个问题是animate，它是jquery的一个函数，起到动画效应。但_btnDown.unbind("click",scrollDown);为何绑定了又要解开呢。这是因为当点击down时，将执行scrollDown函数，当执行到里面去时要解开绑定，以免此时再点击down时又执行scrollDown函数，导致混乱，只有执行完滚动后再绑定。

4。当不点击时，也会自动滚动。那时因为有个_this.hover(autoStop,autoPlay).mouseout();

jQuery中的hover方法是个非常常用的方法，接受二个参数，第一个参数为鼠标移入对象时触发的事件，第二个参数为鼠标移出对象时触发的事
5。$("#scrollDiv").Scroll({line:4,speed:500,timer:3000,up:"btn2",down:"btn1"});调用了Scroll 执行了:function(opt,callback)，这里面却只传了opt，这里面没有callback函数。而且传参数也非常奇怪。不过就当它能这样传，相当于一个object，传过来也。

希望懂得更多的拍砖。

转载于:https://www.cnblogs.com/dewin/archive/2010/06/16/1759222.html