裡面分為兩部分:一部分是圖片上下滑動;一部分是類似刮刮卡的效果;我將分兩節講解,現在先講解第一部分。
原理:
其實裡面就是很多張照片,只有一張顯示,當手觸摸時將上一張和下一張照片移動到上下兩側,當手指滾動時上下兩張照片跟著滾動,當前的照片進行縮小;但手指松開時,判斷滾動的距離是否超過閥值,如果超過就將上一張或者下一張滾動到屏幕中間。
分解:
1.觸摸時:分別將上一頁和下一頁顯示並置於屏幕的上面和下面;
2.滑動時:上一頁和下一頁跟著滾動,當前頁面進行縮小操作;
3.手指離開時:根據滾動的距離判斷,如果大於閥值就將上一頁或者下一頁滾動到屏幕中間,如果小於就將上一頁和下一頁回歸原地,當前頁還原;
var iniCss = { height: document.documentElement.clientHeight, width: document.documentElement.clientWidth } // 初始化高度和寬度 $('.scroll_box').css(iniCss); $('.content_box').css(iniCss); // 觸摸時 $('body').on('touchstart', function(event){ event.preventDefault(); // 取消默認事件,作用是禁止頁面滾動 var target = $(event.target).parent(), prev = target.prev('.scroll_box'), next = target.next('.scroll_box'), height = prev.height()||next.height(); target.removeClass('animation'); if(prev.length !== 0){ // 一開始移動時,我們不需要動畫 prev.removeClass('animation').show().css('-webkit-transform','translate3d(0,'+(-height)+'px,0)'); } if(next.length !== 0){ next.removeClass('animation').show().css('-webkit-transform','translate3d(0,'+(height)+'px,0)'); } window.oldY = event.originalEvent.targetTouches[0].screenY; // 獲取點擊是的y軸坐標 })
// 滑動時 .on('touchmove', function(event){ event.preventDefault(); var target = $(event.target).parent(), prev = target.prev('.scroll_box'), next = target.next('.scroll_box'), height = prev.height() || next.height(); var newY = event.originalEvent.targetTouches[0].screenY; var distance = window.distance = window.oldY - newY; var scale = 1-Math.abs(distance*0.8)/height; if(prev.length == 0 && distance<0)return; if(next.length == 0 && distance>0)return; target.css('-webkit-transform', 'translateY('+-distance*0.2+'px) scale('+scale+')').css('z-index', -999); next.css('-webkit-transform','translate3d(0,'+(height-distance)+'px,0)'); prev.css('-webkit-transform','translate3d(0,'+(-height-distance)+'px,0)'); })
// 手指離開時 .on('touchend', function(event){ event.preventDefault(); var target = $(event.target).parent(), prev = target.prev('.scroll_box'), next = target.next('.scroll_box'), height = prev.height() || next.height(); var distance = window.distance; if(distance > 0){ if(next.length == 0)return; if(Math.abs(distance) > 80){ prev.hide(); target.addClass('animation').css('-webkit-transform', 'translateY('+-distance+'px) scale(0.5)'); setTimeout(function () { target.hide(); }, 300); next.addClass('animation').css('-webkit-transform','translate3d(0,0,0)'); } else { target.addClass('animation').css('-webkit-transform', 'none'); next.addClass('animation').css('-webkit-transform','translate3d(0,'+(height)+'px,0)'); } } else if(distance < 0){ if(prev.length == 0)return; if(Math.abs(distance) > 80){ next.hide(); target.addClass('animation').css('-webkit-transform', 'translateY('+(height+distance)+'px) scale(0.5)'); setTimeout(function () { target.hide(); }, 300); prev.addClass('animation').css('-webkit-transform','translate3d(0,0,0)'); } else { target.addClass('animation').css('-webkit-transform', 'none'); prev.addClass('animation').css('-webkit-transform','translate3d(0,'+(-height)+'px,0)'); } } target.css('z-index', 0); });
代碼我已經提交到CSDN CODE,地址是:https://code.csdn.net/jasondu264/scroll
效果地址:http://duguangwei.sinaapp.com/app.html