DIV CSS 佈局教程網

裡面分為兩部分：一部分是圖片上下滑動；一部分是類似刮刮卡的效果；我將分兩節講解，現在先講解第一部分。

原理：

其實裡面就是很多張照片，只有一張顯示，當手觸摸時將上一張和下一張照片移動到上下兩側，當手指滾動時上下兩張照片跟著滾動，當前的照片進行縮小；但手指松開時，判斷滾動的距離是否超過閥值，如果超過就將上一張或者下一張滾動到屏幕中間。

分解：

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