https://www.taaze.tw/new_ec/rwd/include/js/touchSlideEvents.js

1/*
2* 美編做出來畫面跟舊有的JS效果有落差，只好自己刻JS.....
3*
4* 橫向觸控滑動效果，目標能夠循環，不同螢幕大小改變張數， 尺寸適應大小縮放
5* */
6(function ($) {
7$.fn.touchSlideEvents = function (opts) {
8var config = {
9wipeLeft: function () {},//往左
10wipeRight: function () {},//往右
11wipeUp: function () {},//往上
12wipeDown: function () {},//往下
13loop:true,//是否可循環
14view:2,//預設maxWidth以下2張
15otherView:3,//預設maxWidth以上3張
16maxWidth:767,//預設
17responsive:[],//自定義不同螢幕尺寸下的行為*還沒做...
18scroll_flg:true
19};
20var setting = new Array;
21setting = $.extend({},config,opts);
22var sizeMatch = window.matchMedia("(max-width:"+ setting.maxWidth+"px)");
23var rwdMode = sizeMatch.matches ? setting.maxWidth+'px' : 'other';
24var fn_wipeLeft = setting.wipeLeft;
25var fn_wipeRight = setting.wipeRight;
26var fn_wipeUp = setting.wipeUp;
27var fn_wipeDown = setting.wipeDown;
28var _loop = setting.loop;
29var _orientation = window.orientation;
30var pageView = sizeMatch.matches ? setting.view : setting.otherView;
31if(setting.responsive.length>0){
32if(setting.responsive.length>1){
33//重新排序，maxWidth由大到小
34for(var i=0;i<setting.responsive.length;i++){
35for(var j = 0; j<setting.responsive.length-i-1;j++){
36if(setting.responsive[j].maxWidth<setting.responsive[j+1].maxWidth){
37var tmp = setting.responsive[j+1];
38setting.responsive[j+1] = setting.responsive[j];
39setting.responsive[j] = tmp;
40}
41}
42}
43}
44for(var i=0;i<setting.responsive.length;i++){
45sizeMatch = window.matchMedia("(max-width:"+ setting.responsive[i].maxWidth+"px)");
46if(sizeMatch.matches){
47rwdMode = setting.responsive[i].maxWidth+'px';
48pageView = setting.responsive[i].view != undefined ? setting.responsive[i].view : pageView;
49fn_wipeLeft = setting.responsive[i].wipeLeft != undefined ? setting.responsive[i].wipeLeft : fn_wipeLeft;
50fn_wipeRight = setting.responsive[i].wipeRight != undefined ? setting.responsive[i].wipeRight : fn_wipeRight;
51fn_wipeUp = setting.responsive[i].wipeUp != undefined ? setting.responsive[i].wipeUp : fn_wipeUp;
52fn_wipeDown = setting.responsive[i].wipeDown != undefined ? setting.responsive[i].wipeDown : fn_wipeDown;
53_loop = setting.responsive[i].loop != undefined ? setting.responsive[i].loop : _loop;
54}else{
55if(rwdMode == setting.responsive[i].maxWidth+'px'){
56rwdMode = 'other';
57}
58}
59}
60}
61var el = this;
62var pos = 0;
63var itemW = (el.width()/pageView)*0.95;
64var _list = null;
65var _len = 0;
66var firstIndex = 0;
67var lastIndex = 0;
68var nowTg = 0;
69var moveing = false;
70var ulW = 0;
71el.each(function(){
72_list = $(this).children().find("li");
73_len = _list.length;
74firstIndex = 0;
75lastIndex = _len - 1;
76var _startX = null;
77var _startY = null;
78var min_x = 20;
79var min_y = 20;
80var moveX = 0;
81var moveY = 0;
82var flg = 0;
83var first = 0 ;
84var last = 0;
85$(this).children().css({"transition":"150ms ease","overflow":"visible"});
86if(_loop){
87firstIndex = (_len-pageView) > pageView ? _len-pageView-1 : firstIndex;
88lastIndex = (_len-pageView) > pageView ? _len-pageView-2 : lastIndex;
89for(var i = 0; i < _len; i++){
90if(firstIndex>0 && i >= firstIndex){
91_list.eq(i).css({"-ms-transform":"translate3d("+((i-_len)*itemW)+"px, 0px, 0px)","width":itemW});
92_list.eq(i).css({"-webkit-transform":"translate3d("+((i-_len)*itemW)+"px, 0px, 0px)","width":itemW});
93_list.eq(i).css({"transform":"translate3d("+((i-_len)*itemW)+"px, 0px, 0px)","width":itemW});
94first--;
95}else{
96_list.eq(i).css({"-ms-transform":"translate3d("+(i*itemW)+"px, 0px, 0px)","width":itemW});
97_list.eq(i).css({"-webkit-transform":"translate3d("+(i*itemW)+"px, 0px, 0px)","width":itemW});
98_list.eq(i).css({"transform":"translate3d("+(i*itemW)+"px, 0px, 0px)","width":itemW});
99last = i;
100}
101}
102}else{
103var totalW = 0;
104for(var i = 0; i < _len; i++){
105var _listW = _list.eq(i).attr('slide-fixedW')!=null?parseInt(_list.eq(i).attr('slide-fixedW'),10):itemW;
106_list.eq(i).css({"-ms-transform":"translate3d("+totalW+"px, 0px, 0px)","width":_listW});
107_list.eq(i).css({"-webkit-transform":"translate3d("+totalW+"px, 0px, 0px)","width":_listW});
108_list.eq(i).css({"transform":"translate3d("+totalW+"px, 0px, 0px)","width":_listW});
109last++;
110totalW += _listW;
111}
112ulW = totalW - $(this).width();
113$(this).children().css('width',ulW+'px');
114}
115onTouchStart = function(e){
116e.stopPropagation();
117if((e.type == "touchstart" && e.touches.length == 1) || e.type == "dragstart") {
118_startX = e.touches ? e.touches[0].pageX : e.pageX;
119_startY = e.touches ? e.touches[0].pageY : e.pageY;
120moveing = true;
121}
122};
123onTouchMove = function(e){
124e.stopPropagation();
125if(e.type == "touchmove" || e.type == "drag"){
126var x = e.touches ? e.touches[0].pageX : e.pageX;
127var y = e.touches ? e.touches[0].pageY : e.pageY;
128if((e.type == "drag" && e.pageX > 0) || e.type == "touchmove"){
129moveX = _startX - x;
130moveY = _startY - y;
131var tmpMoveDx = moveX<0?moveX*-1:moveX;
132var tmpMoveDy = moveY<0?moveY*-1:moveY;
133if(tmpMoveDx > 0){
134if(e.cancelable){
135e.preventDefault();
136}
137}
138if(tmpMoveDx > min_x){
139if(moveing){
140setting.scroll_flg=false;
141moveing = true;
142//e.stopPropagation();
143$(this).children().css("-ms-transform","translate3d("+ Math.round(pos - moveX) +"px, 0px, 0px)");
144$(this).children().css("-webkit-transform","translate3d("+ Math.round(pos - moveX) +"px, 0px, 0px)");
145$(this).children().css("transform","translate3d("+ Math.round(pos - moveX) +"px, 0px, 0px)");
146//var range = Math.round(pos/itemW);
147//$(this).children().css("-ms-transform","translate3d("+range +"px, 0px, 0px)");
148//$(this).children().css("-webkit-transform","translate3d("+ range +"px, 0px, 0px)");
149//$(this).children().css("transform","translate3d("+range +"px, 0px, 0px)");
150if(moveX>0){
151fn_wipeLeft();
152}else if(moveX<0){
153fn_wipeRight();
154}
155if(moveY>0){
156fn_wipeDown();
157}else{
158fn_wipeUp();
159}
160}else{
161moveing = false;

162}
163}
164}
165}
166};
167onTouchEnd = function(e){
168e.stopPropagation();
169var tmpMoveDx = moveX<0?moveX*-1:moveX;
170var moveItem_x =  Math.round(tmpMoveDx/itemW);
171var flag = false;
172if(moveing && tmpMoveDx >=min_x &&(e.type == "touchend" || e.type == "drag" || e.type == "dragend")){
173if(!setting.scroll_flg){
174scroll_flg = true;
175}
176moveing = false;
177var startPos = pos;
178pos = pos - moveX;
179if(pos%itemW != 0){
180var range = Math.round(pos/itemW);
181//只要滑動就會跳下一個
182if(moveItem_x<=0){
183if(moveX>0){
184range -=1;
185}else if(moveItem_x<=0){
186range +=1;
187}
188moveItem_x+=1;
189}
190pos = range * itemW;
191}
192$(this).children().css("-ms-transform","translate3d("+ pos +"px, 0px, 0px)");
193$(this).children().css("-webkit-transform","translate3d("+ pos +"px, 0px, 0px)");
194$(this).children().css("transform","translate3d("+ pos +"px, 0px, 0px)");
195flag = true;
196nowTg = nowTg + Math.round((startPos - pos)/itemW);
197if(nowTg < 0){
198nowTg = _len + nowTg;
199}else if(nowTg >= _len){
200nowTg = nowTg - _len;
201}
202}else{
203moveing = true;
204flag = false;
205}
206if(_loop){
207if(moveX < 0 && flag){
208for(var i=1 ; i <= moveItem_x;i++){
209var changePos = (pos *-1) + ((first+ (moveItem_x - i))*itemW);
210_list.eq(lastIndex).css({"-ms-transform":"translate3d("+ changePos +"px, 0px, 0px)"});
211_list.eq(lastIndex).css({"-webkit-transform":"translate3d("+ changePos +"px, 0px, 0px)"});
212_list.eq(lastIndex).css({"transform":"translate3d("+ changePos +"px, 0px, 0px)"});
213firstIndex--;
214lastIndex--;
215if(lastIndex >= _len){
216lastIndex = _len - lastIndex;
217}else if(lastIndex < 0){
218lastIndex = _len + lastIndex;
219}
220if(firstIndex >= _len){
221firstIndex = _len - firstIndex;
222}else if(firstIndex < 0){
223firstIndex = _len + firstIndex;
224}
225}
226}else if(moveX > 0 && flag){
227for(var i=1;i<=moveItem_x;i++){
228var changePos = (pos*-1) + ((last-(moveItem_x-i))*itemW);
229_list.eq(firstIndex).css({"-ms-transform":"translate3d("+ changePos +"px, 0px, 0px)"});
230_list.eq(firstIndex).css({"-webkit-transform":"translate3d("+ changePos +"px, 0px, 0px)"});
231_list.eq(firstIndex).css({"transform":"translate3d("+ changePos +"px, 0px, 0px)"});
232firstIndex++;
233lastIndex++;
234if(lastIndex >= _len){
235lastIndex = _len - lastIndex;
236}else if(lastIndex < 0){
237lastIndex = _len + lastIndex;
238}
239if(firstIndex >= _len){
240firstIndex = _len - firstIndex;
241}else if(firstIndex < 0){
242firstIndex = _len + firstIndex;
243}
244}
245}
246}else{
247if(pos > 0 ){
248$(this).children().css("-ms-transform","translate3d(0px, 0px, 0px)");
249$(this).children().css("-webkit-transform","translate3d(0px, 0px, 0px)");
250$(this).children().css("transform","translate3d(0px, 0px, 0px)");
251pos = 0;
252}else if(pos <= (ulW *-1) ){
253$(this).children().css("-ms-transform","translate3d("+ (ulW*-1)  +"px, 0px, 0px)");
254$(this).children().css("-webkit-transform","translate3d("+ (ulW*-1 ) +"px, 0px, 0px)");
255$(this).children().css("transform","translate3d("+ (ulW*-1)  +"px, 0px, 0px)");
256pos = ulW*-1;
257}
258}
259moveX = 0;
260moveY =0;
261_startX = null;
262_startY = null;
263};
264function stopScroll(e){
265e.preventDefault();
266}
267this.removeEventListener('touchstart', onTouchStart,false);
268this.removeEventListener('touchmove', onTouchMove,false);
269//this.removeEventListener('touchmove', stopScroll,true);
270this.removeEventListener('touchend', onTouchEnd,false);
271this.removeEventListener('touchcancel', onTouchEnd,false)
272this.removeEventListener("dragstart", onTouchStart,false);
273this.removeEventListener("drag", onTouchMove,false);
274this.removeEventListener("drag", stopScroll,false);
275this.removeEventListener("dragend", onTouchEnd,false);
276this.addEventListener('touchstart', onTouchStart,false);
277this.addEventListener('touchmove', onTouchMove,false);
278//this.addEventListener('touchmove', stopScroll,true);
279this.addEventListener('touchend', onTouchEnd,false);
280this.addEventListener('touchcancel', onTouchEnd,false)
281this.addEventListener("dragstart", onTouchStart,false);
282this.addEventListener("drag", onTouchMove,false);
283//this.addEventListener("drag", stopScroll,true);
284this.addEventListener("dragend", onTouchEnd,false);
285});
286var resize = function(el){
287var newPos = 0;
288pos = 0;
289if(_loop){
290var f = firstIndex;
291var l = lastIndex;
292var flg = nowTg < firstIndex ? true : false;
293if(flg){
294for(var i = (firstIndex - _len - nowTg); i <= lastIndex; i++){
295if(f == _len){
296f = 0;
297}
298_list.eq(f).css({"-ms-transform":"translate3d("+(i*itemW)+"px, 0px, 0px)","width":itemW});
299_list.eq(f).css({"-webkit-transform":"translate3d("+(i*itemW)+"px, 0px, 0px)","width":itemW});
300_list.eq(f).css({"transform":"translate3d("+(i*itemW)+"px, 0px, 0px)","width":itemW});
301f++;
302}
303}else{
304for(var i = (firstIndex - nowTg); i < (_len + firstIndex-nowTg); i++){
305if(f == _len){
306f = 0;
307}
308_list.eq(f).css({"-ms-transform":"translate3d("+(i*itemW)+"px, 0px, 0px)","width":itemW});
309_list.eq(f).css({"-webkit-transform":"translate3d("+(i*itemW)+"px, 0px, 0px)","width":itemW});
310_list.eq(f).css({"transform":"translate3d("+(i*itemW)+"px, 0px, 0px)","width":itemW});
311f++;
312}
313}
314if(el.css("height") > itemW*1.67){
315el.css("height",itemW*1.67);
316}
317el.children().css("ms-transform","translate3d(0px, 0px, 0px)");
318el.children().css("-webkit-transform","translate3d(0px, 0px, 0px)");
319el.children().css("transform","translate3d(0px, 0px, 0px)");
320}else{
321var totalW = 0;
322var nowtrans;
323for(var i = 0; i < _len; i++){
324var _listW = _list.eq(i).attr('slide-fixedW')!=null?parseInt(_list.eq(i).attr('slide-fixedW'),10):itemW;
325_list.eq(i).css({"-ms-transform":"translate3d("+totalW+"px, 0px, 0px)","width":_listW});
326_list.eq(i).css({"-webkit-transform":"translate3d("+totalW+"px, 0px, 0px)","width":_listW});
327_list.eq(i).css({"transform":"translate3d("+totalW+"px, 0px, 0px)","width":_listW});
328totalW += _listW;
329}
330ulW = totalW - $(this).width();
331el.children().css('width',ulW+'px');
332//el.children().css("-ms-transform","translate3d("+ nowtrans+"px, 0px, 0px)");
333//el.children().css("-webkit-transform","translate3d("+ nowtrans+"px, 0px, 0px)");
334//el.children().css("transform","translate3d("+ nowtrans+"px, 0px, 0px)");
335}
336}
337$(window).on("resize", function () {
338var nowO = window.orientation;
339nowO = window.orientation<0?window.orientation*-1:window.orientation;
340if(_orientation!=nowO || nowO==undefined){
341if(sizeMatch.matches){
342if(rwdMode =='other'){
343rwdMode = setting.maxWidth+'px';
344pageView = setting.view;
345}
346}else{
347if(rwdMode == setting.maxWidth+'px'){
348rwdMode = 'other';
349pageView = setting.otherView;
350}
351}

352if(setting.responsive.length>0){
353for(var i=0;i<setting.responsive.length;i++){
354sizeMatch = window.matchMedia("(max-width:"+ setting.responsive[i].maxWidth+"px)");
355if(sizeMatch.matches){
356if(rwdMode != setting.responsive[i].maxWidth+'px'){
357rwdMode = setting.responsive[i].maxWidth+'px';
358pageView = setting.responsive[i].view != undefined ? setting.responsive[i].view : pageView;
359fn_wipeLeft = setting.responsive[i].wipeLeft != undefined ? setting.responsive[i].wipeLeft : fn_wipeLeft;
360fn_wipeRight = setting.responsive[i].wipeRight != undefined ? setting.responsive[i].wipeRight : fn_wipeRight;
361fn_wipeUp = setting.responsive[i].wipeUp != undefined ? setting.responsive[i].wipeUp : fn_wipeUp;
362fn_wipeDown = setting.responsive[i].wipeDown != undefined ? setting.responsive[i].wipeDown : fn_wipeDown;
363_loop = setting.responsive[i].loop != undefined ? setting.responsive[i].loop : _loop;
364}
365}else{
366if(rwdMode == setting.responsive[i].maxWidth+'px'){
367rwdMode = 'other';
368}else{
369break;
370}
371}
372}
373}
374itemW = (el.width()/pageView)*0.95;
375if(nowO!=undefined){
376_orientation = nowO
377}
378resize(el);
379}else{
380}
381});
382}
383})(jQuery);