功能需求：
1、滾動框內顯示10條記錄；
2、有向上和向下滾動按鈕，每次點擊按鈕向上或向下滾動記錄條數，不自動滾動；
3、記錄條數不循環滾動，滾動到起點或終點則停止滾動。
下面介紹一個簡單實現方法：
1、外層容器（div） overflow: hidden，內層列表（ul）
2、按鈕點擊事件觸發一個修改列表的函數
3、應用animate實現動畫效果
具體不再啰嗦，直接上代碼
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); //每次滾動的行數，默認為一屏，即父容器高度
var speed = opt.speed ? parseInt(opt.speed, 10) : 600; //卷動速度，數值越大，速度越慢（毫秒）
var m = line; //用於計算的變量
var count = _this.find("li").length; //總共的<li>元素的個數
var upHeight = line * lineH;
function scrollUp() {
if (!_this.is(":animated")) { //判斷元素是否正處於動畫，如果不處於動畫狀態，則追加動畫。
if (m < count) { //判斷 m 是否小於總的個數
m += line;
_this.animate({ marginTop: "-=" + upHeight + "px" }, speed);
}
}
}
function scrollDown() {
if (!_this.is(":animated")) {
if (m > line) { //判斷m 是否大於一屏個數
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" });對滾動按鈕，滾動行數，滾動速度進行設置。
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>