一個JQuery寫的點擊上下滾動的小例子

更新時間：2011年08月27日 16:12:57 作者：

分享一個JQuery寫的點擊上下滾動的小例子，學習jquery的朋友可以參考下。

功能需求：
1、滾動框內顯示10條記錄；
2、有向上和向下滾動按鈕，每次點擊按鈕向上或向下滾動記錄條數(shù)，不自動滾動；
3、記錄條數(shù)不循環(huán)滾動，滾動到起點或終點則停止?jié)L動。
下面介紹一個簡單實現(xiàn)方法：
1、外層容器（div） overflow: hidden，內層列表（ul）
2、按鈕點擊事件觸發(fā)一個修改列表的函數(shù)
3、應用animate實現(xiàn)動畫效果
具體不再啰嗦，直接上代碼
CSS設置

復制代碼代碼如下:

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

JQuery 代碼

復制代碼代碼如下:

 
<script type="text/javascript"> 
(function ($) { 
$.fn.extend({ 
Scroll: function (opt, callback) { 
if (!opt) var opt = {}; 
var _btnUp = $("#" + opt.up); //Shawphy:向上按鈕 
var _btnDown = $("#" + opt.down); //Shawphy:向下按鈕 
var _this = this.eq(0).find("ul:first"); 
var lineH = _this.find("li:first").height(); //獲取行高 
var line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10); //每次滾動的行數(shù)，默認為一屏，即父容器高度 
var speed = opt.speed ? parseInt(opt.speed, 10) : 600; //卷動速度，數(shù)值越大，速度越慢（毫秒） 
var m = line; //用于計算的變量 
var count = _this.find("li").length; //總共的<li>元素的個數(shù) 
var upHeight = line * lineH; 
function scrollUp() { 
if (!_this.is(":animated")) { //判斷元素是否正處于動畫，如果不處于動畫狀態(tài)，則追加動畫。 
if (m < count) { //判斷 m 是否小于總的個數(shù) 
m += line; 
_this.animate({ marginTop: "-=" + upHeight + "px" }, speed); 
} 
} 
} 
function scrollDown() { 
if (!_this.is(":animated")) { 
if (m > line) { //判斷m 是否大于一屏個數(shù) 
m -= line; 
_this.animate({ marginTop: "+=" + upHeight + "px" }, speed); 
} 
} 
} 
_btnUp.bind("click", scrollUp); 
_btnDown.bind("click", scrollDown); 
} 
}); 
})(jQuery); 
$(function () { 
$("#scrollDiv").Scroll({ line: 10, speed: 500,up: "btn1", down: "btn2" }); 
}); 
</script> 

可以設置$("#scrollDiv").Scroll({ line: 10, speed: 500,up: "btn1", down: "btn2" });對滾動按鈕，滾動行數(shù)，滾動速度進行設置。
Html Body 內容

復制代碼代碼如下:

 
<body> 
<p style="font-family: 微軟雅黑; font-weight: bold;"> 
信息滾動欄DEMO：</p> 
<div id="scrollDiv"> 
<ul> 
<li>這是滾動信息的第1行</li> 
<li>這是滾動信息的第2行</li> 
<li>這是滾動信息的第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行</li> 
<li>這是滾動信息的第12行</li> 
<li>這是滾動信息的第13行</li> 
<li>這是滾動信息的第14行</li> 
<li>這是滾動信息的第15行</li> 
<li>這是滾動信息的第16行</li> 
<li>這是滾動信息的第17行</li> 
<li>這是滾動信息的第18行</li> 
<li>這是滾動信息的第19行</li> 
<li>這是滾動信息的第20行</li> 
<li>這是滾動信息的第21行</li> 
<li>這是滾動信息的第22行</li> 
<li>這是滾動信息的第23行</li> 
<li>這是滾動信息的第24行</li> 
<li>這是滾動信息的第25行</li> 
<li>這是滾動信息的第26行</li> 
<li>這是滾動信息的第27行</li> 
<li>這是滾動信息的第28行</li> 
<li>這是滾動信息的第29行</li> 
<li>這是滾動信息的第30行</li> 
<li>這是滾動信息的第31行</li> 
<li>這是滾動信息的第32行</li> 
</ul> 
</div> 
<button id="btn1"> 
上滾</button> 
<button id="btn2"> 
下滾</button> 
</body> 