一个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.validate使用攻略 第三部
Jul 01 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
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
ThinkPHP标签制作教程
2014/07/10 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
Node 自动化部署的方法
2017/10/17 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
理解python中生成器用法
2017/12/20 Python
老生常谈python中的重载
2018/11/11 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
2014年学校财务工作总结
2014/12/06 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
冰雪公主观后感
2015/06/16 职场文书
赞助商致辞
2015/07/30 职场文书
《静夜思》教学反思
2016/02/17 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL