jquery 多行滚动代码(附详细解释)


Posted in Javascript onJune 17, 2010
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<style type="text/css"> 
ul,li{margin:0;padding:0} 
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} 
#scrollDiv li{height:25px;padding-left:10px;} 
</style> 
<script type="text/javascript" src="jquery-1.1.3.pack.js"></script> 
<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 timerID; 
var _this=this.eq(0).find("ul:first"); 
var lineH=_this.find("li:first").height(), //获取行高 
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数,默认为一屏, 
即父容器高度 
speed=opt.speed?parseInt(opt.speed,10):500; //卷动速度,数值越大,速度越慢(毫秒) 
timer=opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔(毫秒) 
if(line==0) line=1; 
var upHeight=0-line*lineH; 
//滚动函数 
var scrollUp=function(){ 
_btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定 
_this.animate({ 
marginTop:upHeight 
},speed,function(){ 
for(i=1;i<=line;i++){ 
_this.find("li:first").appendTo(_this); 
} 
_this.css({marginTop:0}); 
_btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件 
}); 
} 
//Shawphy:向下翻页函数 
var scrollDown=function(){ 
_btnDown.unbind("click",scrollDown); 
for(i=1;i<=line;i++){ 
_this.find("li:last").show().prependTo(_this); 
} 
_this.css({marginTop:upHeight}); 
_this.animate({ 
marginTop:0 
},speed,function(){ 
_btnDown.bind("click",scrollDown); 
}); 
} 
//Shawphy:自动播放 
var autoPlay = function(){ 
if(timer)timerID = window.setInterval(scrollUp,timer); 
}; 
var autoStop = function(){ 
if(timer)window.clearInterval(timerID); 
}; 
//鼠标事件绑定 
_this.hover(autoStop,autoPlay).mouseout(); 
_btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定 
_btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay); 
} 
}) 
})(jQuery); 
$(document).ready(function(){ 
$("#scrollDiv").Scroll({line:4,speed:500,timer:3000,up:"btn2",down:"btn1"}); 
}); 
</script> 
</head> 
<body> 
<p>多行滚动演示:</p> 
<div id="scrollDiv"> 
<ul> 
<li>这是公告标题的第一行</li> 
<li>这是公告标题的第二行</li> 
<li>这是公告标题的第三行</li> 
<li>这是公告标题的第四行</li> 
<li>这是公告标题的第五行</li> 
<li>这是公告标题的第六行</li> 
<li>这是公告标题的第七行</li> 
<li>这是公告标题的第八行</li> 
</ul> 
</div> 
<span id="btn1">down</span> 
<br/> 
<span id="btn2">up</span> 
件 
</body> 
</html>

这段代码只是多行滚动。

1。首先一个<div id="scrollDiv">高度限制是100px,而每行是25px,总共只能显示4行,但div中有八行。那怎么显示呢?

scrollDiv属性中有个overflow:hidden表示不能显示的则隐藏。

2。第二个问题是 哪四行显示在<div id="scrollDiv">中,由于_this.find("li:first").appendTo(_this);将前面的四行剪切插入到后面,并且设置高度是从0开始,这样就只能显示前四行。_this.find("li:last").show().prependTo(_this);同理将后面四行插入到前面去。

3。第三个问题是animate,它是jquery的一个函数,起到动画效应。但_btnDown.unbind("click",scrollDown);为何绑定了又要解开呢。这是因为当点击down时,将执行scrollDown函数,当执行到里面去时要解开绑定,以免此时再点击down时又执行scrollDown函数,导致混乱,只有执行完滚动后再绑定。

4。当不点击时,也会自动滚动。那时因为有个_this.hover(autoStop,autoPlay).mouseout();

jQuery中的hover方法是个非常常用的方法,接受二个参数,第一个参数为鼠标移入对象时触发的事件,第二个参数为鼠标移出对象时触发的事
5。$("#scrollDiv").Scroll({line:4,speed:500,timer:3000,up:"btn2",down:"btn1"});调用了Scroll 执行了:function(opt,callback),这里面却只传了opt,这里面没有callback函数。而且传参数也非常奇怪。不过就当它能这样传,相当于一个object,传过来也。

希望懂得更多的拍砖。

Javascript 相关文章推荐
javascript 读取图片文件的大小
Jun 25 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
canvas绘制多边形
Feb 24 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 #Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 #Javascript
ExtJS 设置级联菜单的默认值
Jun 13 #Javascript
js 未结束的字符串常量错误解决方法
Jun 13 #Javascript
JSON 和 JavaScript eval使用说明
Jun 13 #Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 #Javascript
js null undefined 空区别说明
Jun 13 #Javascript
You might like
在php MYSQL中插入当前时间
2008/04/06 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
shiro授权的实现原理
2017/09/21 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
vue观察模式浅析
2018/09/25 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
Python中Unittest框架的具体使用
2019/08/27 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
有机童装:Toby Tiger
2018/05/23 全球购物
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
介绍一下write命令
2012/09/24 面试题
大一自我鉴定范文
2013/10/04 职场文书
经销商会议欢迎词
2014/01/11 职场文书
片区教研活动总结
2014/07/02 职场文书
合同意向书范本
2014/07/30 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏