用jQuery.touchSwipe插件实现手机端场景滑动切换效果

Posted 2020-08-25 sakuramoon

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用jQuery.touchSwipe插件实现手机端场景滑动切换效果相关的知识，希望对你有一定的参考价值。

　　使用jQuery的touchSwipe插件监听触摸滑动事件，结合css3实现手机端场景滑动切换效果。最好在手机端测试代码，也可以在PC端用鼠标点击模拟滑动。

1、html代码：

<div class="container">

    <div class="page page0 page_current">
        <h1>你好，我是0号屏幕，第一屏,鼠标单击向下/向上拖动</h1>
    </div>

    <div class="page page1">
        <h1>你好，我是1号屏幕，鼠标单击向下/向上拖动</h1>
    </div>

    <div class="page page2">
        <h1>你好，我是2号屏幕，鼠标单击向下/向上拖动</h1>
    </div>

    <div class="page page3">
        <h1>你好，我是3号屏幕，鼠标单击向下/向上拖动</h1>
    </div>

    <div class="page page4">
        <h1>你好，我是4号屏幕，鼠标单击向下/向上拖动</h1>
    </div>

    <i class="fa fa-angle-double-up"></i>

</div>

　　注意:需引入jquery-1.11.1.min.js和jquery.touchSwipe.min.js文件

2、css代码

.container {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    perspective: 1200px;  //透视容器的位置是相对的，增加1200像素透视它
    text-align: center;
}

.container .page {
    color: #fff;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.page_current{
    visibility: visible!important;
    z-index: 1;
}

.container .page h1 {
    margin: 0;
    padding: 0;
}

.fa-angle-double-up{
    position: fixed;
    bottom: 20px;
    left: 49%;
    color: #FFF;
    font-size: 22px;
    animation: blink_up 1.2s infinite;
    -moz-animation: blink_up 1.2s infinite;
    -webkit-animation: blink_up 1.2s infinite;
    -o-animation: blink_up 1.2s infinite;
    z-index: 2;
}

@keyframes blink_up {
    0%, 30% {
        opacity: 0;
        transform: translate(0,10px);
    }

    60% {
        opacity: 1;
        transform: translate(0,0);
    }
    100% {
        opacity: 0;
        transform: translate(0,-8px);
    }
}

/*翻页效果*/

.pt-page-moveToTop {
    -webkit-animation: moveToTop .6s ease both;
    -moz-animation: moveToTop .6s ease both;
    animation: moveToTop .6s ease both;
    z-index: 1!important;
}

.pt-page-moveFromTop {
    -webkit-animation: moveFromTop .6s ease both;
    -moz-animation: moveFromTop .6s ease both;
    animation: moveFromTop .6s ease both;
    z-index: 2!important;
}

.pt-page-moveToBottom {
    -webkit-animation: moveToBottom .6s ease both;
    -moz-animation: moveToBottom .6s ease both;
    animation: moveToBottom .6s ease both;
    z-index: 1!important;
}

.pt-page-moveFromBottom {
    -webkit-animation: moveFromBottom .6s ease both;
    -moz-animation: moveFromBottom .6s ease both;
    animation: moveFromBottom .6s ease both;
    z-index: 2!important;
}

@-webkit-keyframes moveFromTop {
    from {
        -webkit-transform: translateY(-100%);
    }
}
@-moz-keyframes moveFromTop {
    from {
        -moz-transform: translateY(-100%);
    }
}
@keyframes moveFromTop {
    from {
        transform: translateY(-100%);
    }
}

@-webkit-keyframes moveFromBottom {
    from {
        -webkit-transform: translateY(100%);
    }
}
@-moz-keyframes moveFromBottom {
    from {
        -moz-transform: translateY(100%);
    }
}
@keyframes moveFromBottom {
    from {
        transform: translateY(100%);
    }
}


@-webkit-keyframes moveToTop {
    to {
        -webkit-transform: translateY(-20%) scale(0.8);
    }
}
@-moz-keyframes moveToTop {
    to {
        -moz-transform: translateY(-20%) scale(0.8);
    }
}
@keyframes moveToTop {
    to {
        transform: translateY(-20%) scale(0.8);
    }
}

@-webkit-keyframes moveToBottom {
    to {
        -webkit-transform: translateY(20%) scale(0.8);
    }
}
@-moz-keyframes moveToBottom {
    to {
        -moz-transform: translateY(20%) scale(0.8);
    }
}
@keyframes moveToBottom {
    to {
        transform: translateY(20%) scale(0.8);
    }
}

/*翻页效果*/

　　注意：手机端css代码兼容问题：需在css样式前添加前缀以兼容不同浏览器

　　示例代码:

.fa-angle-double-up{
    position: fixed;
    bottom: 20px;
    left: 49%;
    color: #FFF;
    font-size: 22px;
    animation: blink_up 1.2s infinite;
    -moz-animation: blink_up 1.2s infinite;
    -webkit-animation: blink_up 1.2s infinite;
    -o-animation: blink_up 1.2s infinite;
    z-index: 2;
}

@keyframes blink_up {
    0%, 30% {
        opacity: 0;
        transform: translate(0,10px);
    }

    60% {
        opacity: 1;
        transform: translate(0,0);
    }
    100% {
        opacity: 0;
        transform: translate(0,-8px);
    }
}


@-moz-keyframes blink_up {
    0%, 30% {
        -moz-opacity: 0;
        -moz-transform: translate(0,10px);
    }

    60% {
        -moz-opacity: 1;
        -moz-transform: translate(0,0);
    }
    100% {
        -moz-opacity: 0;
        -moz-transform: translate(0,-8px);
    }
}

@-webkit-keyframes blink_up {
    0%, 30% {
        -webkit-opacity: 0;
        -webkit-transform: translate(0,10px);
    }

    60% {
        -webkit-opacity: 1;
        -webkit-transform: translate(0,0);
    }
    100% {
        -webkit-opacity: 0;
        -webkit-transform: translate(0,-8px);
    }
}

@-o-keyframes blink_up {
    0%, 30% {
        -o-opacity: 0;
        -o-transform: translate(0,10px);
    }

    60% {
        -o-opacity: 1;
        -o-transform: translate(0,0);
    }
    100% {
        -o-opacity: 0;
        -o-transform: translate(0,-8px);
    }
}

3、js代码

$(document).ready(function() {
    var nowpage = 0;

    //给最大的盒子增加事件监听
    $(".container").swipe({
        swipe:function(event, direction, distance, duration, fingerCount) {
            if (direction == "up") {        //向上滑动页面
                nowpage = nowpage + 1;
                $(".page").eq((nowpage-1)%5).addClass("pt-page-moveToTop");         //当前显示页面向上滑动移出视窗
                $(".page").eq((nowpage%5)).addClass("page_current pt-page-moveFromBottom");     //下个页面显示并向上滑动至视窗
                $(".container").swipe(‘disable‘);       //页面处于滑动动画时禁止swipe插件
                setTimeout(function(){
                    $(".page").eq((nowpage-1)%5).removeClass("page_current pt-page-moveToTop");      //移除滑动动画效果
                    $(".page").eq((nowpage%5)).removeClass("pt-page-moveFromBottom");           //移除滑动动画效果
                    $(".container").swipe(‘enable‘);     //页面滑动动画结束时重新启用swipe插件
                },600);
            } else if (direction == "down") {      //向下滑动页面
                if(nowpage==0){            //当前页面为第一个页面时
                    nowpage = nowpage +4;
                    console.log("a");
                }else{
                    nowpage = nowpage -1;
                }
                $(".page").eq((nowpage+1)%5).addClass("pt-page-moveToBottom");      //当前显示页面向下滑动移出视窗
                $(".page").eq((nowpage%5)).addClass("page_current pt-page-moveFromTop");     //下个页面显示并向下滑动至视窗
                $(".container").swipe(‘disable‘);
                console.log(nowpage%5);
                console.log((nowpage+1)%5);
                console.log(nowpage);
                setTimeout(function(){
                    $(".page").eq((nowpage+1)%5).removeClass("page_current pt-page-moveToBottom");
                    $(".page").eq((nowpage%5)).removeClass("pt-page-moveFromTop");
                    $(".container").swipe(‘enable‘);
                },600);
            }
        }

    });
});

　　通过使用jquery的touchSwipe插件给class名称为container的div元素添加滑动事件监听,并根据滑动事件的方向切换场景。

以上是关于用jQuery.touchSwipe插件实现手机端场景滑动切换效果的主要内容，如果未能解决你的问题，请参考以下文章

WordPress手机端插件——WPtouch

html能否实现手机端左右滑动切换不同的页面

C++使用大漠插件及截图

手机的轮播图可以用jquery来做吗

12.手机端如何拖动组件--WEB设计器JQUERY插件讲解（含源码）

可以用手机实现的移动端车牌识别功能