在网上可以随处找到这段代码,但是没有任何人解释这段代码,只要自己研究好久。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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,传过来也。
希望懂得更多的拍砖。