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 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
关于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
9个经典的PHP代码片段分享
2014/12/18 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
js列举css中所有图标的实现代码
2011/07/04 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
Python深入学习之上下文管理器
2014/08/31 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
python中的随机函数random的用法示例
2018/01/27 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
公司年会演讲稿范文
2014/01/11 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
安全生产演讲稿
2014/05/09 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
小时代观后感
2015/06/10 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书