功能需求： 1、滚动框内显示10条记录； 2、有向上和向下滚动按钮，每次点击按钮向上或向下滚动记录条数，不自动滚动； 3、记录条数不循环滚动，滚动到起点或终点则停止滚动。 下面介绍一个简单实现方法： 1、外层容器（div） overflow: hidden，内层列表（ul） 2、按钮点击事件触发一个修改列表的函数 3、应用animate实现动画效果 具体不再啰嗦，直接上代码 CSS设置 复制代码 代码如下: <BR>ul, li <BR>{ <BR>margin: 0; <BR>padding: 0; <BR>} <BR>#scrollDiv <BR>{ <BR>width: 300px; <BR>height: 250px; <BR>min-height: 25px; <BR>line-height: 25px; <BR>border: #ccc 1px solid; <BR>overflow: hidden; <BR>} <BR>#scrollDiv li <BR>{ <BR>height: 25px; <BR>padding-left: 10px; <BR>} <BR> JQuery 代码 复制代码 代码如下: <BR>(function ($) { <BR>$.fn.extend({ <BR>Scroll: function (opt, callback) { <BR>if (!opt) var opt = {}; <BR>var _btnUp = $("#" + opt.up); //Shawphy:向上按钮 <BR>var _btnDown = $("#" + opt.down); //Shawphy:向下按钮 <BR>var _this = this.eq(0).find("ul:first"); <BR>var lineH = _this.find("li:first").height(); //获取行高 <BR>var line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10); //每次滚动的行数，默认为一屏，即父容器高度 <BR>var speed = opt.speed ? parseInt(opt.speed, 10) : 600; //卷动速度，数值越大，速度越慢（毫秒） <BR>var m = line; //用于计算的变量 <BR>var count = _this.find("li").length; //总共的<li>元素的个数 <BR>var upHeight = line * lineH; <BR>function scrollUp() { <BR>if (!_this.is(":animated")) { //判断元素是否正处于动画，如果不处于动画状态，则追加动画。 <BR>if (m < count) { //判断 m 是否小于总的个数 <BR>m += line; <BR>_this.animate({ marginTop: "-=" + upHeight + "px" }, speed); <BR>} <BR>} <BR>} <BR>function scrollDown() { <BR>if (!_this.is(":animated")) { <BR>if (m > line) { //判断m 是否大于一屏个数 <BR>m -= line; <BR>_this.animate({ marginTop: "+=" + upHeight + "px" }, speed); <BR>} <BR>} <BR>} <BR>_btnUp.bind("click", scrollUp); <BR>_btnDown.bind("click", scrollDown); <BR>} <BR>}); <BR>})(jQuery); <BR>$(function () { <BR>$("#scrollDiv").Scroll({ line: 10, speed: 500,up: "btn1", down: "btn2" }); <BR>}); <BR> 可以设置$("#scrollDiv").Scroll({ line: 10, speed: 500,up: "btn1", down: "btn2" });对滚动按钮，滚动行数，滚动速度进行设置。 Html Body 内容 复制代码 代码如下: 信息滚动栏DEMO： 这是滚动信息的第1行 这是滚动信息的第2行 这是滚动信息的第3行 这是滚动信息的第4行 这是滚动信息的第5行 这是滚动信息的第6行 这是滚动信息的第7行 这是滚动信息的第8行 这是滚动信息的第9行 这是滚动信息的第10行 这是滚动信息的第11行 这是滚动信息的第12行 这是滚动信息的第13行 这是滚动信息的第14行 这是滚动信息的第15行 这是滚动信息的第16行 这是滚动信息的第17行 这是滚动信息的第18行 这是滚动信息的第19行 这是滚动信息的第20行 这是滚动信息的第21行 这是滚动信息的第22行 这是滚动信息的第23行 这是滚动信息的第24行 这是滚动信息的第25行 这是滚动信息的第26行 这是滚动信息的第27行 这是滚动信息的第28行 这是滚动信息的第29行 这是滚动信息的第30行 这是滚动信息的第31行 这是滚动信息的第32行 上滚 下滚
