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的数组的扩展实例代码
Jul 09 Javascript
jquery 选择器部分整理
Oct 28 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
jquery实现图片切换代码
Oct 13 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
非主流的textarea自增长实现js代码
2011/12/20 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
vue中的数据绑定原理的实现
2018/07/02 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
Python分治法定义与应用实例详解
2017/07/28 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
python解释器安装教程的方法步骤
2020/07/02 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
python 实现简易的记事本
2020/11/30 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
2013年研究生毕业感言
2014/02/06 职场文书
品质标语大全
2014/06/21 职场文书
化学教育专业求职信
2014/07/08 职场文书
师德师风个人整改措施
2014/10/27 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
JS数组方法some、every和find的使用详情
2021/10/05 Javascript