flipsnap（上下左右翻页功能）

迈不过友情╰ 2022-09-26 00:28 172阅读 0赞

**相对于 [swiper ][swiper]插件来讲的话，页面功能不需要太强大的时候，这个比较轻便，如果你有时间的话，你可以做一个。**

### **flipsnap的简单使用** ###

**index.html**

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
            <meta name="format-detection" content="telphone=no, email=no"/>
            <meta http-equiv="expires" content="0">
            <title>创建账户</title>
            <link rel="stylesheet" href="css/index.css" />
        </head>
    
        <body>
            <div>
                <div class="page page-1-1 page-current">
                    <section>
                        <form method="get" action="javascript:void(0);" onsubmit="return btnNext(2);">
                            <h3>账户</h3>
                            <button type="submit" class="btnNextStep">下一步</button>
                        </form>
                    </section>
                </div>
    
                <div class="page page-1-2 hide">
                    <section>
                        <form method="get" action="javascript:void(0);" onsubmit="return btnNext(2);">
                            <h3>账户2</h3>
                            <button type="submit" class="btnNextStep">下一步</button>
                        </form>
                    </section>
                </div>
    
                <div class="page page-1-3 hide">
                    <section>
                        <form method="get" action="javascript:void(0);" onsubmit="return btnNext(2);">
                            <h3>账户3</h3>
                            <button type="submit" class="btnNextStep">下一步</button>
                        </form>
                    </section>
                </div>
    
                <div class="page page-1-4 hide">
                    <section>
                        <form method="get" action="javascript:void(0);" onsubmit="return btnNext(2);">
                            <h3>账户4</h3>
                            <button type="submit" class="btnNextStep">下一步</button>
                        </form>
                    </section>
                </div>
            </div>
        </body>
        <script src="js/zepto.min.js"></script>
        <script src="js/flipsnap.min.js"></script>
        <script src="js/index.js" defer="defer"></script>
    </html>

**flipsnap.min.js**

**index.js**

/** * 开户中心 */
    ;!function(){ 
        var now = {
                row: 1,
                col: 1
            },
            last = {
                row: 0,
                col: 0
            },
            isAnimating = false;
        const towards = {
            up: 1,
            right: 2,
            down: 3,
            left: 4
        };
    
        function pageMove(tw) { 
            var lastPage = ".page-" + last.row + "-" + last.col,
                nowPage = ".page-" + now.row + "-" + now.col;
            switch(tw) {
                case towards.up:
                    outClass = 'pt-page-moveToTop';
                    inClass = 'pt-page-moveFromBottom';
                    break;
                case towards.right:
                    outClass = 'pt-page-moveToRight';
                    inClass = 'pt-page-moveFromLeft';
                    break;
                case towards.down:
                    outClass = 'pt-page-moveToBottom';
                    inClass = 'pt-page-moveFromTop';
                    break;
                case towards.left:
                    outClass = 'pt-page-moveToLeft';
                    inClass = 'pt-page-moveFromRight';
                    break;
            }
            isAnimating = true;
            $(nowPage).removeClass("hide");
    
            $(lastPage).addClass(outClass);
            $(nowPage).addClass(inClass);
    
            //暂时先去除延时加载效果，需要的时候，自动加上即可
            $(lastPage).removeClass('page-current');
            $(lastPage).removeClass(outClass);
            $(lastPage).addClass("hide");
    
            $(nowPage).addClass('page-current');
            $(nowPage).removeClass(inClass);
    
            isAnimating = false;
        }
    
        function btnNext() { 
    
            if(isAnimating) return;
            last.row = now.row;
            last.col = now.col;
            //修改过----------------------&& last.row < 5 &&----------------------------------
            now.row = 1;
            now.col += 1;
            if(last.col <= 0) {
                now = {
                    row: 1,
                    col: 1
                }, last = {
                    row: 0,
                    col: 0
                };
            }
            if(last.col >= 4) {
                //这里可以放置完成的标签
            } else if(last.col == 3) {
                setTimeout(function() { 
                    $(".btnNextStep").html("完成");
                }, 300);
            }
            pageMove(towards.left);
        }
        this.btnNext = btnNext;
    }();

相应的全部代码在 [这里][Link 1]

--------------------

[swiper]: http://www.swiper.com.cn/
[Link 1]: http://download.csdn.net/detail/qq_16559905/9630432