JS实现安卓手机端触摸屏幕左右滑动显示的效果

Posted 2023-04-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现安卓手机端触摸屏幕左右滑动显示的效果相关的知识，希望对你有一定的参考价值。

就是有一个很多很多列的表格，要移植到手机端，要求数据可以左右滑动显示，怎么做。

参考技术A ：是近代欧美新发展起来的一种诗体。它不受格律限制，无固定格式，注重自然的、内在的节奏，押大致相近的韵或不押韵，字数、行数、句式、音调都比较自由，语言比较通俗。美国诗人惠特曼（1819—1892年）是欧美自由诗的创始人，《草叶集》是他的主要诗集。中国“五四”以来也流行这种诗体。（3）散文诗：是兼有散文和诗的特点的一种文学体裁。作品中有诗的意境和激情，常常富有哲理，注重自然的节奏感和音乐美，篇幅短小，像散文一样不分行，不押韵，如，鲁迅的《追问

请问你答了些什么。

参考技术B 用scrollLeft追问

这不是设置滚动条位置的么，可是表格列多的话在手机端直接没有滚动条怎么办？

本回答被提问者采纳

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

以上是关于JS实现安卓手机端触摸屏幕左右滑动显示的效果的主要内容，如果未能解决你的问题，请参考以下文章

手机端如何用JS实现触屏表格列左右滑动的效果

CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）

手机左右滑动屏幕切换页面是如何实现的

跪求，js手机移动端html点击图片弹出后可触摸屏左右滑动上下张图片的效果

荣耀手机左右滑动屏幕怎么不是翻页

安卓手机下雪效果怎么设置？