一个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 相关文章推荐
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
js实现中文实时时钟
Jan 15 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
smarty模板数学运算示例
2016/12/11 PHP
php正则修正符用法实例详解
2016/12/29 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
JS中eval函数的使用示例
2013/07/21 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
python 产生token及token验证的方法
2018/12/26 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
金融管理毕业生求职信
2014/03/03 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
故意伤害辩护词
2015/05/21 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android
nginx 配置指令之location使用详解
2022/05/25 Servers