快捷導(dǎo)航

一個(gè)JQuery寫的點(diǎn)擊上下滾動的小例子

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

分享一個(gè)JQuery寫的點(diǎn)擊上下滾動的小例子，學(xué)習(xí)jquery的朋友可以參考下。

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

復(fù)制代碼代碼如下:

 
<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 代碼

復(fù)制代碼代碼如下:

 
<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ù)，默認(rèn)為一屏，即父容器高度 
var speed = opt.speed ? parseInt(opt.speed, 10) : 600; //卷動速度，數(shù)值越大，速度越慢（毫秒） 
var m = line; //用于計(jì)算的變量 
var count = _this.find("li").length; //總共的<li>元素的個(gè)數(shù) 
var upHeight = line * lineH; 
function scrollUp() { 
if (!_this.is(":animated")) { //判斷元素是否正處于動畫，如果不處于動畫狀態(tài)，則追加動畫。 
if (m < count) { //判斷 m 是否小于總的個(gè)數(shù) 
m += line; 
_this.animate({ marginTop: "-=" + upHeight + "px" }, speed); 
} 
} 
} 
function scrollDown() { 
if (!_this.is(":animated")) { 
if (m > line) { //判斷m 是否大于一屏個(gè)數(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> 

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

復(fù)制代碼代碼如下:

 
<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> 