最近做了一个手机端的微信分享领红包的项目，在这个项目中需要用到一个全屏滑动的功能，所以自己就根据网上查找的相关资料再通过自己的改造，封装了一个滑动的插件，这个插件可以实现以下几个功能：
- 指定水平/垂直滑动
- 指定滑动的回调函数
下面是具体的代码：
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 */