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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
js切换光标示例代码
Oct 10 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
layer弹出层扩展主题的方法
Sep 11 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 日期加减的类,很不错
2009/10/10 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
分析python服务器拒绝服务攻击代码
2014/01/16 Python
python实现SMTP邮件发送功能
2020/06/16 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
广告创意求职信
2014/03/17 职场文书
文艺演出策划方案
2014/06/07 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
java如何实现socket连接方法封装
2021/09/25 Java/Android
Java对文件的读写操作方法
2022/04/29 Java/Android
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL