一个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实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
有道JavaScript监听浏览器的问题
Jun 23 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 Javascript
Vue 3.0中jsx语法的使用
Nov 13 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
星际争霸任务指南——人族
2020/03/04 星际争霸
PHP以及MYSQL日期比较方法
2012/11/29 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
tensorflow训练中出现nan问题的解决
2018/02/10 Python
python处理csv中的空值方法
2018/06/22 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
python 实现批量图片识别并翻译
2020/11/02 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
市场部规章制度
2014/01/24 职场文书
父母对孩子说的话
2014/04/12 职场文书
小学优秀班主任材料
2014/12/17 职场文书
三行辞职书范文
2015/02/26 职场文书
2015年电工工作总结
2015/04/10 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang