一个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 相关文章推荐
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
Vue中的字符串模板的使用
May 17 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
Vue的props父传子的示例代码
May 20 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 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核心代码分析require和include的区别
2011/01/02 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
python实现通过shelve修改对象实例
2014/09/26 Python
python实现内存监控系统
2021/03/07 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
口头翻译求职人自荐信
2013/12/07 职场文书
八年级物理教学反思
2014/01/19 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
陈欧广告词
2014/03/14 职场文书
起诉状范本
2015/05/20 职场文书
外出考察学习心得体会
2016/01/18 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
Python使用pyecharts控件绘制图表
2022/06/05 Python