用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元素添加滑动事件监听,并根据滑动事件的方向切换场景。

时间： 2024-12-09 18:35:15

用jQuery.touchSwipe插件实现手机端场景滑动切换效果的相关文章

手机端图片滑动切换效果

最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环切换等等,具体可以拿demo代码自己本地试试,注意只支持手机端哦大概思路:通过touchstart.touchmove.touchend 三个事件加上css3的3d变化效果配合,实现滑动切换图片, 开发是基于Zepto框架,当然也支持其他任何一款手机端框架,只需将代码中的美元符号$换为指定框架操作

jQuery手机端触摸卡片切换效果

效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html 可以用手机查看效果. 代码如下: 1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=ed

css3 手机端翻屏切换效果

原理是基于css3的 1.景深:perspective:100px; 2.中心点:transform-origin:center center 0; 3.transform-style:preserve-3d 父级作变换会保留效果到子集上面通过节点嵌套实现立方体效果: <div class="box"> <div class="div"> <div> <span>1</span> <div>

HTML5手机端手指滑动上拉加载代码

在线预览源码下载 HTML5手机端手指滑动上拉加载代码是一款通过jquery实现tab切换和上拉加载更多的效果,适用于手机端页面开发.该特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 加入前端爱好者QQ群(123235875) 点击加群,共同交流进度!

手机端上下滑动选择项小组件

这是一个手机端的滑动选择小组件. 详细的需求介绍:话费充值,滑动选择充值面额,显示对应的应付金额即可. 重点请看Javascript部分的代码,请大神指点.跪谢! 贴代码~ CSS 部分: 1 html, body, h1, h2, h3, p, dl, dd, ol, ul, th, td, form, fieldset, input, button, textarea, a { 2 margin: 0; 3 padding: 0; } 4 5 html { 6 -webkit-text-s

jQuery.touchswipe插件

TouchSwipe一款专门为移动设备设计的jquery插件,用于监听单个和多个手指触摸等事件. 一.特点: 1.监听滑动的4个方向:上.下.左.右: 2.监听多个手指收缩还是外张: 3.支持单手指或双手指触摸事件: 4.支持单击事件touchSwipe对象和它的子对象: 5.可定义临界值和最大时间来判断手势的实际滑动: 6.滑动事件有4个触发点:“开始”,“移动”,“结束”和“取消”: 7.结束事件可以在触摸释放或是达到临界值时触发: 8.允许手指刷和页面滚屏: 9.可禁止用户通过输入元素(如

jquery支持PC端手机端幻灯片代码

分享一款支持PC端手机端幻灯片代码是一款支持移动触摸,支持鼠标拖拽切换,支持带进度条的自动播放模式.交果图如下 : 在线预览源码下载实现的代码. html代码: <div class="flex"> <ul class="slides"> <li data-title="Slide 1"> <img alt="" src="img/beasts_feature.jpg

手机端的轮播效果

手机端轮播效果,貌似以后能用得上吧首先是结构html <section class="page pageshow"> <section id="tabPic"> <ul id="picList"> <li href="javascript:;"><img src="image/1.jpg" ></li> <li href=&qu

swiper.js-搭建微信、手机端全屏广告效果

swiper.js http://www.swiper.com.cn/ 官方网站,下载的类库和要用那些api我们都需在这里查找 http://www.swiper.com.cn/demo/senior/index.html各种效果,我们要做的就是这种我们简单发现,就是每一屛会出现动画(css3 animation),切换的当前屏会重新执行动画,可推出,没显示的屏删除了动画看我们发现了什么?看第一张firebug截图每一屛就是一个section标签, 在当前显示的section上有了其他兄