Html
    Css
    Js

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

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.7.2
 立即下载

JQuery写的点击上下滚动的小例子

功能需求: 

1、滚动框内显示10条记录; 

2、有向上和向下滚动按钮,每次点击按钮向上或向下滚动记录条数,不自动滚动; 

3、记录条数不循环滚动,滚动到起点或终点则停止滚动。 

下面介绍一个简单实现方法: 

1、外层容器(div) overflow: hidden,内层列表(ul) 

2、按钮点击事件触发一个修改列表的函数 

3、应用animate实现动画效果 

0