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

Posted

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点击图片弹出后可触摸屏左右滑动上下张图片的效果

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

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