一个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实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
HTML颜色选择器实现代码
Nov 23 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 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引用地址改变变量值的问题
2012/03/23 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
php eval函数一句话木马代码
2015/05/21 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
Python发送Email方法实例
2014/08/21 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
python创建子类的方法分析
2019/11/28 Python
应届大专毕业生个人自荐信
2013/09/22 职场文书
高中生学习总结的自我评价范文
2013/10/13 职场文书
韩国商务邀请函
2014/01/14 职场文书
土地转让协议书
2014/09/27 职场文书
法律讲堂观后感
2015/06/11 职场文书
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
Hive HQL支持2种查询语句风格
2022/06/25 数据库