JS封装移动端触摸滑动插件应用于导航banner【精装版】

自己封装了一个小插件，一个小尝试。 可用于类似于京东导航等效果，效果多样化，很方便。 欢迎大家提点意见。

mrChenSwiper(  {parent, child, type, parentN, childN, goli,lisname}  );

mrChenSwipe({

parent  :  父盒子 [父盒子的高度会继承父级] ,  必填

child  :  子盒子 [ul,子盒子需要用ul>li>a],  必填

type  :  滑动方向 [vertical || level],  必填

parentN  :  垂直-父盒子宽度  ~ 默认值200  ||  水平-父盒子高度 ~ 默认值200,  选填

childN  :  垂直-li高度  ~ 默认值40  ||  水平-li宽度  ~  默认值80,  选填

goli  :  是否开启点击导航  [true || false],  选填

lisname  :  选中标签类名  ~  默认值 'current' 选填

})

注意：请传入原生DOM对象。   

0	function mrChenSwipe(obj) {
1	/*
2	startD   //开始的坐标
3	moveD    //滑动时的坐标
4	goD //改变的距离
5	lis    //获取所有li
6	distance        //吸附距离
7	maxPosition     //最小定位区间
8	minSwipe //滑动最小定位区间
9	maxSwipe //滑动最大定位区间
10	currSwipe //当前定位
11	xy //XY
12	*/
13
14	var parent = obj.parent,
15	child = obj.child,
16	type = obj.type,
17	goli = obj.goli,
18	lisname = obj.lisname || 'current',
19	startD = 0,
20	moveD = 0,
21	goD = 0,
22	lis = child.querySelectorAll('li'),
23	lisLength = lis.length,
24	distance = 100,
25	maxPosition = 0,
26	minSwipe, maxSwipe, currSwipe = 0,
27	xy;
28
29
30	/*加过渡*/
31	var addTransition = function(elm) {
32
33	elm.style.webkitTransition = 'all 0.2s'; /*兼容*/
34
35	elm.style.transition = 'all 0.2s';
36
37	};
38
39	/*删除过渡*/
40	var removeTransition = function(elm) {
41
42	elm.style.webkitTransition = 'none'; /*兼容*/
43
44	elm.style.transition = 'none';
45
46	};
47
48	//设置定位
49	var setTranslate = function(elm, direction, num) {
50
51	if (direction == 'y') {
52
53	elm.style.webkitTransform = 'translateY(' + num + 'px)'; /*兼容*/
54
55	elm.style.transform = 'translateY(' + num + 'px)';
56
57	}
58
59	if (direction == 'x') {
60
61	elm.style.webkitTransform = 'translateX(' + num + 'px)'; /*兼容*/
62
63	elm.style.transform = 'translateX(' + num + 'px)';
64
65	}
66
67	};
68
69
70
71	//判断如果为上下滑动，获取宽高
72	//垂直
73	if (type == 'vertical') {
74
75	//默认宽度
76	parentN = obj.parentN || 200;
77
78	//li默认高度
79	childN = obj.childN || 40;
80
81	parent.style.width = parentN + 'px';
82
83	parent.style.height = '100%';
84
85	var parentWH = parent.offsetHeight;
86
87	var childWH = childN * lisLength;
88
89	//获取定位最小区间
90	minPosition = parentWH - childWH;
91
92	minSwipe = minPosition - distance;
93
94	maxSwipe = maxPosition + distance;
95
96	setTranslate(child, 'y', 0);
97
98	goV();
99
100	}
101
102	//水平
103	if (type == 'level') {
104
105	//默认高度
106	parentN = obj.parentN || 200;
107
108	//li默认宽度
109	childN = obj.childN || 80;
110
111	//父盒子默认100%宽度
112	parent.style.width = document.documentElement.clientWidth + 'px';
113
114	parent.style.height = parentN + 'px';
115
116	//子盒子宽度
117	child.style.width = lisLength * childN + 'px';
118
119	child.style.height = parentN + 'px';
120
121	var parentWH = parent.offsetWidth;
122
123	var childWH = childN * lisLength;
124
125	//获取定位最小区间
126	minPosition = parentWH - childWH;
127
128	minSwipe = minPosition - distance;
129
130	maxSwipe = maxPosition + distance;
131
132	setTranslate(child, 'x', 0);
133
134	goL();
135
136	}
137
138	//水平初始化
139
140	function goL() {
141
142	var i = 0;
143
144	for (i; i < lisLength; i += 1) {
145
146	lis[i].style.width = childN + 'px';
147
148	lis[i].style.height = '100%';
149
150	lis[i].style.textAlign = 'center';
151
152	lis[i].style.lineHeight = parentN + 'px';
153
154	lis[i].style.float = 'left';
155
156	aStyle(lis[i]);
157
158	}
159
160	}
161
162	//垂直初始化
163
164	function goV() {
165
166	var i = 0;
167
168	for (i; i < lisLength; i += 1) {
169
170	lis[i].style.width = '100%';
171
172	lis[i].style.height = childN + 'px';
173
174	lis[i].style.textAlign = 'center';
175
176	lis[i].style.lineHeight = childN + 'px';
177
178	aStyle(lis[i]);
179
180	}
181	}
182
183	//给a设置style
184
185	function aStyle(dom) {
186
187	dom.querySelector('a').style.display = 'block';
188
189	dom.querySelector('a').style.height = '100%';
190
191	dom.querySelector('a').style.color = '#333';
192
193	dom.querySelector('a').style.textDecoration = 'none';
194
195	}
196
197	//子盒子绑定滑动事件
198	child.addEventListener('touchstart', function(e) {
199
200	if (type == 'vertical') {
201
202	startD = e.touches[0].clientY;
203
204	}
205
206	if (type == 'level') {
207
208	startD = e.touches[0].clientX;
209
210	}
211
212	})
213
214
215	//滑动中
216	child.addEventListener('touchmove', function(e) {
217
218	if (type == 'vertical') {
219
220	moveD = e.touches[0].clientY;
221
222	xy = 'y';
223
224	}
225
226	if (type == 'level') {
227
228	moveD = e.touches[0].clientX;
229
230	xy = 'x';
231	}
232
233	goD = moveD - startD + currSwipe;
234
235	removeTransition(child);
236
237	if (goD > minSwipe && goD < maxSwipe) {
238
239	setTranslate(child, xy, goD);
240
241	}
242
243	})
244
245	//滑动结束
246	window.addEventListener('touchend', function() {
247
248	//最终定位
249	if (goD > maxPosition) {
250
251	currSwipe = maxPosition;
252
253	addTransition(child);
254
255	setTranslate(child, xy, currSwipe);
256
257	} else if (goD < minPosition) {
258
259	currSwipe = minPosition;
260
261	console.log(minPosition);
262
263	addTransition(child);
264
265	setTranslate(child, xy, currSwipe);
266	} else {
267
268	currSwipe = goD;
269
270	}
271
272	startD = 0;
273	moveD = 0;
274	goD = 0;
275
276	})
277
278
279	//如果开启单机索引
280	if (goli) {
281
282	//循环绑定点击事件
283	for (var j = 0; j < lisLength; j += 1) {
284
285	lis[j].index = j;
286
287	tap(lis[j], function(e) {
288
289	if (type == 'level') {
290	xy = 'x';
291	}
292
293	if (type == 'vertical') {
294	xy = 'y';
295	}
296
297	//找到父元素
298	var li = e.target.parentNode;
299
300	for (var n = 0; n < lisLength; n += 1) {
301
302	lis[n].className = '';
303
304	}
305
306	li.className = lisname;
307
308	//计算位置
309	var tapGoD = -li.index * childN;
310
311	if (tapGoD > minPosition) {
312
313	currSwipe = tapGoD;
314
315	addTransition(child);
316
317	setTranslate(child, xy, currSwipe);
318
319	} else {
320
321	currSwipe = minPosition;
322
323	setTranslate(child, xy, currSwipe);
324
325	}
326
327	})
328
329	}
330
331	}
332
333	//封装单机事件
334
335	function tap(dom, callback) {
336
337	/*判断dom是不是一个对象 如果是才给他绑定事件*/
338	if (typeof dom == 'object') {
339
340	/*判断是否滑动过*/
341	var isMove = false;
342
343	/*记录刚刚触摸到屏幕的时候的时间*/
344	var time = 0;
345
346	dom.addEventListener('touchstart', function(e) {
347
348	/*刚刚触摸到屏幕的时候的时间*/
349	time = Date.now();
350
351	});
352
353	dom.addEventListener('touchmove', function(e) {
354
355	/*设置为true*/
356	isMove = true;
357
358	});
359
360	window.addEventListener('touchend', function(e) {
361
362	/*
363	* tap事件的要求
364	*1.没有滑动过
365	*2.响应时间在150ms以内
366	* */
367	if (!isMove && (Date.now() - time) < 150) {
368
369	/*为了提高响应的速度*/
370	callback && callback(e);
371
372	}
373
374	isMove = false;
375	time = 0;
376
377	});
378
379	}
380	};
381	}

   插件下载地址：百度网盘 欢迎共同探讨！

 

查看原文-摘自大公爵ddamy.com

转载于:https://www.cnblogs.com/webhb/p/5755712.html