一个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 使用点滴函数代码
May 20 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
js实现圆盘记速表
Aug 03 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
学习vue.js条件渲染
Dec 03 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
基于javascript实现日历功能原理及代码实例
May 07 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
我的论坛源代码(五)
2006/10/09 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
php实现求相对时间函数
2015/06/15 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
python中assert用法实例分析
2015/04/30 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
python selenium 获取接口数据的实现
2020/12/07 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
护士的自我鉴定
2014/02/07 职场文书
增员口号大全
2014/06/18 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL