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


Posted in Javascript onAugust 27, 2011

功能需求:
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>
Javascript 相关文章推荐
js函数般调用正则
Apr 08 Javascript
jquery tools 系列 scrollable学习
Sep 06 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
微信小程序实现文件预览
Oct 22 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 #Javascript
JavaScript原型继承之基础机制分析
Aug 26 #Javascript
自己动手开发jQuery插件教程
Aug 25 #Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 #Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 #Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 #Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 #Javascript
You might like
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
js传值 判断
2006/10/26 Javascript
DHTML 中的绝对定位
2006/11/26 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
vuex state及mapState的基础用法详解
2018/04/19 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
宝信软件JAVA工程师面试经历
2012/08/19 面试题
医学生求职自荐信
2013/10/25 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
冰雪公主观后感
2015/06/16 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
使用Ajax实现进度条的绘制
2022/04/07 Javascript