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 相关文章推荐
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
vue实现商品列表的添加删除实例讲解
May 14 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
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
javascript如何创建对象
2016/08/29 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
js中less常用的方法小结
2017/08/09 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
基于树莓派的语音对话机器人
2019/06/17 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
学前教育教师求职自荐信
2013/09/22 职场文书
计算机专业推荐信范文
2013/11/20 职场文书
实习生自我鉴定范文
2013/12/05 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
党支部综合考察材料
2014/05/19 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书