https://www.afaindia.com/vendor/3dslider/jquery.responsiveGallery.js

1/*!     
2        jquery.responsiveGallery.js
3        v 1.0
4        David
5        http://www.CodingSerf.com
6*/
7
8;(function($){
9    $.fn.responsiveGallery = function(option){
10		var opts = $.extend({}, $.fn.responsiveGallery.defaults, option), //配置选项
11			$rgWrapper = this,
12			$rgItems = $rgWrapper.find('li'), //.responsiveGallery-item
13			rgItemsLength = $rgItems.length,
14			support3d = Modernizr.csstransforms3d,
15			support2d = Modernizr.csstransforms,
16			rgCurrentIndex = 0;
17			rgShowCount = 3,
18			rgTansCSS = [],
19			animatDuration = opts.animatDuration,
20			isAnimating = false,
21			touchX = 0;
22
23		function getTransform3dCSS(tx,ty,ry,zIndex,opacity,visibility){
24			return {
25				'-webkit-transform'	: 'translateX('+tx+') translateZ('+ty+'px) rotateY('+ry+'deg)',
26				'-moz-transform'	: 'translateX('+tx+') translateZ('+ty+'px) rotateY('+ry+'deg)',
27				'-o-transform'		: 'translateX('+tx+') translateZ('+ty+'px) rotateY('+ry+'deg)',
28				'-ms-transform'		: 'translateX('+tx+') translateZ('+ty+'px) rotateY('+ry+'deg)',
29				'transform'			: 'translateX('+tx+') translateZ('+ty+'px) rotateY('+ry+'deg)',
30				'z-index'			: zIndex,
31				'opacity'			: opacity,
32				'visibility'		: visibility
33			};
34		}
35
36		function getTransform2dCSS(t,s,originX,originY,opacity,visibility){
37			return {
38				'-webkit-transform'	: 'translate('+t+') scale('+s+')',
39				'-moz-transform'	: 'translate('+t+') scale('+s+')',
40				'-o-transform'		: 'translate('+t+') scale('+s+')',
41				'-ms-transform'		: 'translate('+t+') scale('+s+')',
42				'transform'			: 'translate('+t+') scale('+s+')',
43
44				'-webkit-transform-origin'	: originX+' '+originY,
45				'-moz-transform-origin'		: originX+' '+originY,
46				'-ms-transform-origin'		: originX+' '+originY,
47				'-o-transform-origin'		: originX+' '+originY,
48				'transform-origin'			: originX+' '+originY,
49
50				'opacity'			: opacity,
51				'visibility'		: visibility
52			};
53		}
54
55		function getTransitionCSS(time,ease){
56			return {
57				'-webkit-transition': 'all '+time+'s '+ease,
58				'-moz-transition': 'all '+time+'s '+ease,
59				'-ms-transition': 'all '+time+'s '+ease,
60				'-o-transition': 'all '+time+'s '+ease,
61				'transition': 'all '+time+'s '+ease,
62			}
63		}
64
65		function getTransform7CSS(){
66			var cssArray;
67
68			if(support3d){
69				cssArray = [
70					getTransform3dCSS('-100%',	-400,	40,		-1,	0,	'hidden'),
71					getTransform3dCSS('0',		-350,	45,		-1,	1,	'visible'),
72
73					getTransform3dCSS('100%', 	-300, 	45,		0,	1,	'visible'),
74					getTransform3dCSS('200%', 	-200, 	40,		1,	1,	'visible'),
75					getTransform3dCSS('300%', 	0, 		0,		2,	1,	'visible'),
76					getTransform3dCSS('400%', 	-200, 	-40,	1,	1,	'visible'),
77					getTransform3dCSS('500%', 	-300, 	-45,	0,	1,	'visible'),
78
79					getTransform3dCSS('600%', 	-350, 	-45,	-1,	1,	'visible'),
80					getTransform3dCSS('700%', 	-400, 	-40,	-1,	0,	'hidden')
81				];
82			} else if(support2d){
83				cssArray = [
84					getTransform2dCSS('-100%',	0.6,	'100%',		'50%',	0,	'hidden'),
85					getTransform2dCSS('0',		0.6,	'100%',		'50%',	1,	'visible'),
86
87					getTransform2dCSS('100%', 	0.7,	'100%',		'50%',	1,	'visible'),
88					getTransform2dCSS('200%', 	0.8,	'50%',		'50%',	1,	'visible'),
89					getTransform2dCSS('300%', 	1,		'50%',		'50%',	1,	'visible'),
90					getTransform2dCSS('400%', 	0.8,	'50%',		'50%',	1,	'visible'),
91					getTransform2dCSS('500%', 	0.7,	'0%',		'50%',	1,	'visible'),
92
93					getTransform2dCSS('600%', 	0.6,	'0%',		'50%',	1,	'visible'),
94					getTransform2dCSS('700%', 	0.6,	'0%',		'50%',	0,	'hidden')
95				];
96			}
97
98			return cssArray;
99		}
100
101		function getTransform5CSS(){
102			var cssArray;
103
104			if(support3d){
105				cssArray = [
106					getTransform3dCSS('-100%',	-400, 	45,		-1,	0,	'hidden'),
107
108					getTransform3dCSS('0', 		-300, 	45,		0,	1,	'visible'),
109					getTransform3dCSS('100%', 	-200, 	45,		1,	1,	'visible'),
110					getTransform3dCSS('200%', 	0, 		0,		2,	1,	'visible'),
111					getTransform3dCSS('300%', 	-200, 	-45,	1,	1,	'visible'),
112					getTransform3dCSS('400%', 	-300, 	-45,	0,	1,	'visible'),
113
114					getTransform3dCSS('500%', 	-400, 	-45,	-1,	0,	'hidden')
115				];
116			} else if(support2d){
117				cssArray = [
118					getTransform2dCSS('-100%',	0.6,	'100%',		'50%',	0,	'hidden'),
119
120					getTransform2dCSS('0', 		0.7,	'100%',		'50%',	1,	'visible'),
121					getTransform2dCSS('100%', 	0.8,	'50%',		'50%',	1,	'visible'),
122					getTransform2dCSS('200%', 	1,		'50%',		'50%',	1,	'visible'),
123					getTransform2dCSS('300%', 	0.8,	'50%',		'50%',	1,	'visible'),
124					getTransform2dCSS('400%', 	0.7,	'0%',		'50%',	1,	'visible'),
125
126					getTransform2dCSS('500%', 	0.6,	'0%',		'50%',	0,	'hidden')
127				];
128			}
129
130			return cssArray;
131		}
132
133		function getTransform3CSS(){
134			var cssArray;
135
136			if(support3d){
137				cssArray = [
138					getTransform3dCSS('-100%',	-400, 	45,		0,	0,	'hidden'),
139
140					getTransform3dCSS('0', 		-300, 	45,		1,	1,	'visible'),

141					getTransform3dCSS('100%', 	0, 		0,		2,	1,	'visible'),
142					getTransform3dCSS('200%', 	-300, 	-45,	1,	1,	'visible'),
143
144					getTransform3dCSS('300%', 	-400, 	-45,	0,	0,	'hidden')
145				];
146			} else if(support2d){
147				cssArray = [
148					getTransform2dCSS('-100%',	0.65,	'100%',		'50%',	0,	'hidden'),
149
150					getTransform2dCSS('0', 		0.8,	'50%',		'50%',	1,	'visible'),
151					getTransform2dCSS('100%', 	1,		'50%',		'50%',	1,	'visible'),
152					getTransform2dCSS('200%', 	0.8,	'50%',		'50%',	1,	'visible'),
153
154					getTransform2dCSS('300%', 	0.65,	'0%',		'50%',	0,	'hidden')
155				];
156			}
157
158			return cssArray;
159		}
160
161		function getTransform1CSS(){
162			var cssArray;
163
164			if(support3d){
165				cssArray = [
166					getTransform3dCSS('-100%',	-300, 	45,		0,	0,	'hidden'),
167
168					getTransform3dCSS('0%', 	0, 		0,		2,	1,	'visible'),
169
170					getTransform3dCSS('100%', 	-300, 	-45,	0,	0,	'hidden')
171				];
172			} else if(support2d){
173				cssArray = [
174					getTransform2dCSS('-100%',	0.65,	'100%',		'50%',	0,	'hidden'),
175
176					getTransform2dCSS('0', 	1,		'50%',		'50%',	1,	'visible'),
177
178					getTransform2dCSS('100%', 	0.65,	'0%',		'50%',	0,	'hidden')
179				];
180			}
181
182			return cssArray;
183		}
184		function setSectionItems(fun){
185			var $items = [];
186
187			$items[0] = $rgItems.eq(rgCurrentIndex-1);
188			fun(0,$items[0]);
189			for (var i=1;i<=rgShowCount+1;i++) {
190				var next = rgCurrentIndex+i-1;
191				if(next>=rgItemsLength){
192					next = next - rgItemsLength;
193				}
194				$items[i] = $rgItems.eq(next);
195				fun(i,$items[i]);
196			}
197		}
198
199		function moveGallery(direction){
200			isAnimating = true;
201
202			rgCurrentIndex = direction + rgCurrentIndex;
203			if(rgCurrentIndex < 0){
204				rgCurrentIndex = rgItemsLength - 1;
205			}
206			if(rgCurrentIndex >= rgItemsLength){
207				rgCurrentIndex = 0;
208			}
209			setSectionItems(function(i,$item){
210				$item.css(rgTansCSS[i]);
211			});
212
213			setTimeout(function(){
214				isAnimating = false;
215			},animatDuration); //防止连击
216		}
217
218		opts.$btn_next.on('click',function(e){
219			!isAnimating && moveGallery(+1);
220			
221		});
222		opts.$btn_prev.on('click',function(e){
223			!isAnimating && moveGallery(-1);
224			
225		});
226
227		$rgWrapper.on('touchstart',function(e){
228			var touch = e.originalEvent.touches[0];
229			touchX = touch.pageX;
230		}).on('touchend touchcancel',function(e){
231			var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0],
232				touchGap = touch.pageX - touchX;
233
234			if(touchGap>5){ //swipe right
235				opts.$btn_prev.trigger('click');
236			}
237			if(touchGap<-5){ //swipe left
238				opts.$btn_next.trigger('click');
239			}
240
241		});
242		$(window).on('resize', function(e){
243			$rgItems.removeAttr('style'); //清除样式，否则在resize的时候不能正常取到下列元素的width
244
245			var wrapperWidth = $rgWrapper.width(),
246				itemWidth = $rgItems.eq(0).width();
247
248			rgShowCount = Math.round(wrapperWidth/itemWidth);
249			
250			if(rgShowCount === 1){ //显示1个
251				rgTansCSS = getTransform1CSS();
252			} else if(rgShowCount === 3){ //显示3个
253				rgTansCSS = getTransform3CSS();
254			} else if(rgShowCount === 5){ //显示5个
255				rgTansCSS = getTransform5CSS();
256			} else if(rgShowCount === 7){
257				rgTansCSS = getTransform7CSS();
258			} else {
259				return;
260			}
261
262			rgCurrentIndex = 0;
263			moveGallery(0);
264			setTimeout(function(){
265				$rgItems.css(getTransitionCSS(animatDuration/1000, 'ease-in-out'));
266			},10); //等初始位置设置好后再添加动画
267
268		}).trigger('resize');
269
270		//链式返回
271		return this;
272    };
273    $.fn.responsiveGallery.defaults = {
274		animatDuration: 400, //动画时长 单位 ms
275		$btn_prev: $('.responsiveGallery-btn_prev'),
276		$btn_next: $('.responsiveGallery-btn_next')
277    };
278})(jQuery);