一个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+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
如何更好的编写js async函数
May 13 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 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
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
用JavaScript实现动画效果的方法
2013/07/20 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
python实现在windows下操作word的方法
2015/04/28 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
简单实现python进度条脚本
2017/12/18 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
Python实现微信好友的数据分析
2019/12/16 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
市场部专员岗位职责
2013/11/30 职场文书
幼儿教师思想汇报
2014/01/10 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
上课不认真检讨书
2014/09/17 职场文书
二手房购房协议书范本
2014/10/05 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
春节晚会开场白
2015/05/29 职场文书
八一建军节主持词
2015/07/01 职场文书
消防演习感想
2015/08/10 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
《认识年月日》教学反思
2016/02/19 职场文书