DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> 關於HTML >> 維多利亞的秘密微信推廣廣告模仿-圖片上下滑動
維多利亞的秘密微信推廣廣告模仿-圖片上下滑動
編輯:關於HTML     

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

原理:

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

分解:

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved