声明:此程序仅针对手机端,简单的封装一个插件,意在记载插件的开发过程,如有错误及不足之处,还望即时指出。

移动开发的时候,我们经常会遇到滑动事件,众所周知手机端滑动主要依靠touch事件。最近接连遇到两个页面都有类似overflow:auto的效果,一般情况下通过css设置是可以实现的(虽说丑了点儿),,但是一旦overflow:auto的元素响应touch事件时就会有诸多不便,例如fullpage中某一元素自滑动,我们可以通过normalScrollElements来使元素滑动的时候不滑动到下一屏,但是在元素滑动到最底部的时候也就不能响应下一屏事件,上滑也是一样,这时候就需要touch事件来响应,为了以后封装方便,特简单封装一个jquery插件,同时也复习一下jquery插件开发及touch事件;

插件大体思路是这样的,如下图所示:方框内区域为固定宽高的父元素(设置overflow:hidden),子元素高度大于父元素,我们通过响应touch事件改变子元素的translate值(top也可以,但是translate效率更高一些),当然在此期间我们需判断子元素translate值的边界,最大为0,最小为子元素高度-父元素高度

ps:如果想做子元素根据手指移动,松开手指后回到边界需另写程序

      下面来一步步写插件

第一步,先建立一个安全的作用域

;(function($){
//插入代码 })(jQuery)

如果我们需要通过$(“#id”).xx()方法调用,需要像下面这样写,这里的fn即jquery的prototype;

$.extend({

exec:function(){}

})    //这种扩展通过$.exec()调用

$.fn.simuScroll = function(option){
var scrollObj=new simuScroll(this,option);
return scrollObj.init();
}

下面来看上面代码中的simuScroll方法,这是一个构造函数,它接受两个参数,ele为当前接受touch事件的元素(一般可以设置为父元素),option为用户传入的配置参数,如改变translate的元素,父元素子元素高度,extra为需额外增加的高度,滑动到顶部或底部时执行的回调函数等等;

var simuScroll = function(ele,option){
this.settings = {
target : ele, //事件元素
changeTarget:'',
outerHeight : '800', //外层高度
innerHeight : '500', //内层高度
extra : '0', //额外增加的距离
swipeUp : null,
swipeDown : null,
vertical:true
};
//通过jquery.extend对默认的settings进行扩展,得出一个全新的对象
this.opt = jQuery.extend({},this.settings,option);
this.initNumber = this.lastNumber = this.result = 0;
this.flag = false;
//计算出子元素与父元素距离差,以此来判定元素的最大滑动距离
this.diff = parseFloat(this.opt.innerHeight) - parseFloat(this.opt.outerHeight) + parseFloat(this.opt.extra);
this.diff = this.diff < 0 ? 0 :this.diff;
this.direction = '';
};

在对jquery prototype进行扩展时,第一步为实例化上面的构造函数,第二步则直接调用了构造函数的init方法,具体见下面备注

init:function(){
//jquery对象直接绑定touch事件获取event需originalEvent获取原生对象的event属性
//jquery对象 获取pagex event.originalEvent.touches[0].pageX
//dom对象 event.touches[0].pageX
var target = this.opt.target.get(0); //如果子元素高度大于父元素,则执行滑动事件,否则执行回调函数
this.flag = this.diff > 0 ? 'translate' : 'exec'; /*如果元素已设置transform中 translate,scale,skew,rotate中的任何一项,
则我们再直接设置transform:translateY(10px)时会覆盖掉初始设置的属性
所以我们通过获取元素的matrix值既保证原有属性,又能设置任意值*/
var cssText = this.opt.changeTarget.css('-webkit-transform');
if(cssText=='none'){ //元素未设置transform属性
this.str = this.opt.vertical ? 'translateY' : 'translateX' ;
}else{
this.str = cssText ;
var reg = /-?\d+\.?\d*/g; //正则表达式 /*获取matrix中各参数
直接获取到的matrix值为类似matrix(1,0,0,1,0,0)
获取到的为[1,0,0,1,0,0] 这样我们就可以随意的修改某一个值
数组的第5项为元素的translateX值,第6项为translateY值 */
this.params = this.str.match(reg);
this.matrix = this.opt.vertical ? 6 : 5 ; //根据传入的参数确定要修改的值为translateY或tranlateX
}
var _this = this; //父元素绑定touch事件,传递事件对象及context
target.addEventListener('touchstart',function(e){
_this.start(e,_this)
});
target.addEventListener('touchmove',function(e){
_this.move(e,_this)
});
target.addEventListener('touchend',function(e){
_this.end(e,_this)
});
}

touchstart方法相对比较简单,根据需要滑动的方向记录手指接触屏幕时的初始值

start:function(e,context){
e.preventDefault();
var touches = e.touches[0];
context.initNumber = context.opt.vertical ? touches.pageY : touches.pageX;
},

touchmove方法主要根据手指滑动距离动态改变元素css属性,让元素能够跟随手指进行移动

setNumber方法只有一句话:  this.params.splice(n-1,1,number)  根据传入的参数改变matrix数组

move:function(e,context){
e.preventDefault();
var touches = e.touches[0];
number = context.opt.vertical ? touches.pageY : touches.pageX; //获取相对手指触碰屏幕的变化值
var delta = number - context.initNumber;
if(context.flag == 'translate'){ //如果需要滑动
context.result = context.lastNumber + delta; //设置滑动的最大值和最小值
context.result = context.result > 0 ? 0 : context.result ;
context.result = -context.result > context.diff ? -context.diff : context.result; //动态设置元素css属性
if(context.matrix){
switch (context.matrix) {
case 6:
context.setNumber(6,context.result)
break;
case 5:
context.setNumber(5,context.result)
break;
}
context.opt.changeTarget.css('-webkit-transform','matrix('+context.params.join(',')+')')
}else{
context.opt.changeTarget.css('-webkit-transform',context.str+'('+context.result+'px)')
}
}
},

touchend则判断释放时是否需要执行回调函数

end:function(e,context){
e.preventDefault();
var touches = e.changedTouches[0];
var number = context.opt.vertical ? touches.pageY : touches.pageX,
n = number - context.initNumber; //当元素滑动距离大于10 并且最初元素translate值为0同时回调函数存在,则执行回调函数
if(n>10 && context.lastNumber == 0 && context.opt.swipeDown){
context.opt.swipeDown()
}else if(n<-10 && context.lastNumber == -context.diff && context.opt.swipeUp){
context.opt.swipeUp();
} //将常量设为结果值,能保证多次连贯滑动
context.lastNumber = context.result;
}

基本上一个简单的jQuery插件就完成了,框架如下

;(function($){
var a = function(m,n){
//函数内容 }; a.prototype = {
init:function(){ },
start:function(){ },
move:function(){ },
end:function(){ },
setNumber:function(){ }
} $.fn.scrol = function(o){
var obj = new a(this,o);
return obj.init()
} })(jQuery)

调用时如下:

$(".outer").simuScroll({
'outerHeight':$(".outer").height(),
'innerHeight':$('.inner').height(),
'changeTarget' : $(".inner"),
'swipeUp' :function(){
console.log('up')
},
'swipeDown' :function(){
console.log('down')
},
vertical:true
})

jQuery插件开发(溢出滚动)的更多相关文章

  1. jQuery插件开发(转)

    jQuery插件开发全解析 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命 ...

  2. JQUERY 插件开发——LAZYLOADIMG(预加载和延迟加载图片)

    开发背景 本插件开发是近期写的最后一个插件了,接下来我想把最近研究的redis最为一个系列阐述下.当然Jquery插件开发是我个人爱好,我不会停止,在将来的开发中我会继续完善,当然也会坚持写这个系列的 ...

  3. 掌握jQuery插件开发,这篇文章就够了

    ---恢复内容开始--- 在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及数据jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足形影 ...

  4. 全解析jQuery插件开发!很好很强大!

    最近对JQuery插件开发超级感兴趣,看到这样一篇好文章,可以说是<用实例一步步教你写Jquery插件>的十全大补,大家可以两篇结合着看看! jQuery插件的开发包括两种: 一种是类级别 ...

  5. jQuery插件开发——全屏切换插件

    这个插件包含三个部分:HTML结构.CSS代码和JS代码. HTML结构是固定的,结构如下: <!--全屏滚动--> <div class="fullpage-contai ...

  6. jQuery全能图片滚动插件

    插件开发背景 随着前端开发领域越来越受到重视,前端开发也变得越来越火热.各种优秀的前端组件层出不穷.尤其是jQuery插件,很多前端组件都是基于jQuery开开发的. 图片滚动是前端开发中可以说是非常 ...

  7. 如何掌握jQuery插件开发(高能)

    在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用 ...

  8. 【转】简单的jQuery插件开发方法

    在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用 ...

  9. JavaScript学习笔记(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

随机推荐

  1. .NET Nancy 详解(四) Self Host

    Self Host 使得Nancy 能够在任意application 中启动,无论是console 还是windows service.这期我们使用的版本是Nancy v0.4.0. Demo 首先看 ...

  2. VBA的打开关闭保存另存为等事件无法正常跑的原因

    打开执行的代码需要写在thisworkbook的open事件下!!!!!如下图: VBA中事件分为三种:工作簿事件,工作表事件,窗体.控件事件. 工作簿事件发生在特定的工作簿中,如Open(打开工作簿 ...

  3. MySQL prepare 原理

    Prepare的好处  Prepare SQL产生的原因.首先从mysql服务器执行sql的过程开始讲起,SQL执行过程包括以下阶段 词法分析->语法分析->语义分析->执行计划优化 ...

  4. Xilinx命名规则

    xilinx公司的FPGA种类繁多,知道了命名规则,看起来应该会舒服很多. 1.xilinx的FPGA命名规则 Xilinx的ug112第一章中介绍了Xilinx公司的FPGA命名规则.一般而言,大的 ...

  5. IIS服务器下301跳转是怎么样实现的?

    301跳转的用法很多,对于一名SEO来说,301转向是必须掌握的本领,但是对于301转向而言,许多人都并不清楚,301跳转以后,需不需要对原网站进行优化,再次提及一边301跳转的定义. 所谓301跳转 ...

  6. 对数据缺失的处理(R)

    在进行数据分析之前,我们往往需要对数据进行预处理,而最重要一部分就是怎么处理哪些缺失的数据. 通常的方法有四种: 删除这些缺失的数据. 用最高频数来补充缺失数据. 通过变量的相关关系来填充缺失值. 通 ...

  7. C# 获取一个独一无二的字符串 GUID

    在保存文件,创建目录时,为了保证名称不重复,经常使用Random产生一个随机数,有更简单且不会重复的办法是: Guid.NewGuid().ToString() 就会生成一个类似 37c1acec-4 ...

  8. Synchronized和java.util.concurrent.locks.Lockde区别联系

    1.Lock能够完成几乎所有synchronize的功能,并且具有锁投票,定时锁,可中断等候锁,synchronize是java语言层面的,是内置的关键字,Lock是一个包,synchronize使用 ...

  9. Visual Studio: 一键卸载所有组件工具,彻底卸载干净。

    第一步.手动卸载VS主体 第二步.下载工具并解压 网盘下载地址:https://pan.baidu.com/s/1eSHRYxW 也可以在Github上下载最新版本:https://github.co ...

  10. php插入数据含有特殊符号的处理方法

    我们在向mysql写入数据时,比如: mysql_query(”update table set `title`=’kuhanzhu’s blog’”); http://www.cnblogs.com ...