Jquery 滚屏

Question

转：雨里木

Jquery 滚屏

1. #scrollDiv
2.         {
3.             width: 835px;
4.             height: 230px;
5.             min-height: 25px;
6.             line-height: 25px;
7.             overflow: hidden;
8.         }<div id="scrollDiv">
9. 　　<ul>
10.       <li>这是第1行</li>
11.     　　　 <li>这是第2行</li>
12.            <li>这是第3行</li>
13.               <li>这是第4行</li>
14. 　　　  <li>这是第5行</li>
15. 　　　  <li>这是第6行</li>
16.             <li>这是第7行</li>
17.                                                                             　　
18. </ul></div>
19. <img src="../images/uparrow.png" width="24" height="22" id="btn1" alt=""/>
20. <img src="../images/downarrow.png" width="24" height="22" id="btn2" alt=""/>

复制代码Jquery代码：

1. (function ($) {
2.     $.fn.extend({
3.         Scroll: function (opt, callback) {
4.             //参数初始化
5.             if (!opt) var opt = {};
6.             var _btnUp = $("#" + opt.up); //Shawphy:向上按钮
7.             var _btnDown = $("#" + opt.down); //Shawphy:向下按钮
8.             var _this = this.eq(0).find("ul:first");
9.             var lineH = _this.find("li:first").height(), //设置行高
10.                 line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10),
11. 　　　　　　　　　 //每次滚动的行数，默认为一屏，即父容器高度
12.                 speed = opt.speed ? parseInt(opt.speed, 10) : 500; //卷动速度，数值越大，速度越慢（毫秒）
13.             var upHeight = 0 - line * lineH;
14.             //向上翻页函数
15.             var scrollUp = function () {
16.                 _btnUp.unbind("click", scrollUp); //Shawphy:取消向上按钮的函数绑定
17.                 _this.animate({
18.                     marginTop: upHeight
19.                 }, speed, function () {
20.                     for (i = 1; i <= line; i++) {
21.                         _this.find("li:first").appendTo(_this);
22.                     }
23.                     _this.css({ marginTop: 0 });
24.                     _btnUp.bind("click", scrollUp); //Shawphy:绑定向上按钮的点击事件
25.                 });
26.             }
27.             //向下翻页函数
28.             var scrollDown = function () {
29.                 _btnDown.unbind("click", scrollDown);
30.                 for (i = 1; i <= line; i++) {
31.                     _this.find("li:last").show().prependTo(_this);
32.                 }
33.                 _this.css({ marginTop: upHeight });
34.                 _this.animate({
35.                    marginTop: 0
36.                 }, speed, function () {
37.                     _btnDown.bind("click", scrollDown);
38.                 });
39.             }
40.             //鼠标事件绑定
41.             _btnUp.css("cursor", "pointer").click(scrollUp);
42.             _btnDown.css("cursor", "pointer").click(scrollDown);
43.         }
44.     })})(jQuery);

复制代码另外一种解决方案：直接使用javascript的scrolltop

HTML代码相同

1. function down() {
2.             var o = document.getElementById("scrollDiv");
3.             var n1 = parseInt(o.scrollTop);
4.             var n2 = parseInt(o.clientHeight);
5.             var n3 = parseInt(o.scrollHeight);//
6.             if (n1 + n2 == n3) {//
7.                 alert('end!');//
8.             } else {
9.                 o.scrollTop = n1 + 66;
10.             //}        }
11.         function up() {
12.             var o = document.getElementById("scrollDiv");
13.             var n1 = parseInt(o.scrollTop);
14.             var n2 = parseInt(o.clientHeight);
15.             var n3 = parseInt(o.scrollHeight);
16.             o.scrollTop -= 66;
17.         }

复制代码