封装的一个手机端全屏滑动方法
最近做了一个手机端的微信分享领红包的项目，在这个项目中需要用到一个全屏滑动的功能，所以自己就根据网上查找的相关资料再通过自己的改造，封装了一个滑动的插件，这个插件可以实现以下几个功能：
- 指定水平/垂直滑动
- 指定滑动的回调函数
下面是具体的代码：
1 ;(function(root){ 2 'use strict'; 3 function touch(opts){ 4 5 this.canvas = opts.dom; 6 this.section = opts.section; 7 this.direc = opts.direc || 'vertical'; 8 this.fn = opts.fn || null; 9 this.canvas && this.bindEvent(); 10 this.section && this.init(); 11 } 12 13 touch.prototype.init=function(){ 14 15 this.width = (window.innerWidth > 640)? 640:window.innerWidth; 16 this.height = window.innerHeight; 17 this.boundary = this.height/6; 18 this.index = 0; 19 20 this.canvas.style.cssText = 'position:relative'; 21 if(this.direc != 'horiz') 22 for(var i=0,l=this.section.length;i<l;i++){ 23 this.section[i].style.cssText='position:absolute;'; 24 this.section[i].style.webkitTransform = "translate3d(0,"+i*this.height+"px,0)"; 25 } 26 else{ 27 for(var i=0,l=this.section.length;i<l;i++){ 28 this.section[i].style.cssText='position:absolute;'; 29 this.section[i].style.webkitTransform = "translate3d("+i*this.width+"px,0,0)"; 30 } 31 } 32 33 }; 34 35 touch.prototype.bindEvent=function(){ 36 37 var _this = this; 38 var startx=0,starty=0,startTime=0,endTime=0,offset=0,offsety = 0; 39 40 function start(e){ 41 42 startx = e.touches[0].pageX; 43 starty = e.touches[0].pageY; 44 startTime = new Date()*1; 45 46 } 47 48 function move(e){ 49 50 _this.offsetx = e.touches[0].pageX - startx; 51 _this.offsety = e.touches[0].pageY - starty; 52 var i = _this.index -1, 53 m = i +3; 54 if(_this.direc != 'horiz'){ 55 for(;i<m;i++){ 56 _this.section[i] && (_this.section[i].style.webkitTransform = 'translate3d(0,'+ ((i - _this.index)*_this.height + _this.offsety) +'px,0)'); 57 _this.section[i] && (_this.section[i].style.webkitTransition = 'none'); 58 } 59 }else{ 60 for(;i<m;i++){ 61 _this.section[i] && (_this.section[i].style.webkitTransform = 'translate3d('+ ((i - _this.index)*_this.width + _this.offsetx) +'px,0,0)'); 62 _this.section[i] && (_this.section[i].style.webkitTransition = 'none'); 63 } 64 } 65 e.preventDefault(); 66 e.stopPropagation(); 67 68 } 69 70 function end(){ 71 72 endTime = new Date()*1; 73 74 function handle(value){ 75 if(endTime - startTime > 800){ 76 77 if(value > _this.boundary){ 78 _this.go('-1'); 79 }else if(value < -_this.boundary){ 80 _this.go('+1'); 81 }else{ 82 _this.go('0'); 83 } 84 }else{ 85 86 if(value>50){ 87 88 _this.go('-1'); 89 }else if(value <-50){ 90 _this.go('+1'); 91 }else{ 92 _this.go('0'); 93 } 94 _this.offsetx = 0; 95 _this.offsety = 0; 96 } 97 } 98 99 (_this.direc != 'horiz')?handle(_this.offsety):handle(_this.offsetx); 100 101 102 } 103 104 this.canvas.addEventListener('touchstart',start,false); 105 this.canvas.addEventListener('touchmove',move,false); 106 this.canvas.addEventListener('touchend',end,false); 107 }; 108 109 110 touch.prototype.go=function(n){ 111 112 var index = this.index+n*1, 113 len = this.section.length, 114 _this = this; 115 116 if(index>len-1){ 117 index = len-1; 118 }else if(index <=0){ 119 index = 0 120 } 121 122 function callBack(){ 123 _this.fn(index,_this.section[index],_this.section,_this.canvas); 124 this.removeEventListener('webkitTransitionEnd',callBack,false); 125 } 126 127 this.section[index].style.webkitTransition = '-webkit-transform .4s ease-out'; 128 this.section[index-1] && (this.section[index-1].style.webkitTransition = '-webkit-transform .4s ease-out'); 129 this.section[index+1] && (this.section[index+1].style.webkitTransition = '-webkit-transform .4s ease-out'); 130 this.section[index].style.webkitTransform = 'translate3d(0,0,0)'; 131 132 if(this.direc != 'horiz'){ 133 this.section[index-1] && (this.section[index-1].style.webkitTransform = 'translate3d(0,'+-this.height+'px,0)'); 134 this.section[index+1] && (this.section[index+1].style.webkitTransform = 'translate3d(0,'+this.height +'px,0)'); 135 }else{ 136 this.section[index-1] && (this.section[index-1].style.webkitTransform = 'translate3d('+-this.width+'px,0,0)'); 137 this.section[index+1] && (this.section[index+1].style.webkitTransform = 'translate3d('+this.width +'px,0,0)'); 138 } 139 140 this.index = index; 141 this.section[index].addEventListener('webkitTransitionEnd',callBack,false); 142 }; 143 144 root.touch = function(p){ 145 new touch(p); 146 }; 147 148 })(window);
调用方法：
1 touch({ 2 'dom':document.querySelector('.box'), 3 'section': document.querySelector('section'), 4 'direc':'horiz', 5 'fn':function(i,t,s,box){} 6 }); 7 /* {} 一个对象，用于提供设置的参数。 8 |— dom : 所有分屏的外层包裹盒子。 9 |— section : 所有分屏。 10 |— direc : 滑屏的方向:horiz(水平滑动，最大宽度为640)、vertical(垂直滑动)。默认值为vertical。 11 |- fn : 滑动后的回调函数，i(索引)、t(当前分屏)、s(所有的分屏)、box(分屏的外层包裹盒子) 12 */
