手机端实现fullPage——全屏滚动效果

Posted Mr.聂

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手机端实现fullPage——全屏滚动效果相关的知识,希望对你有一定的参考价值。

封装了一个小插件模拟fullPage的全屏滚动效果,比较简单。

特点:

  1.  纯js实现,小巧轻便。

  2.  兼容性好。苹果、安卓都没问题,暂时没遇到问题机型。

缺点:

  1.  仅封装了基础功能,html、css么有去封装。个人觉得不封装更方便大家使用。

 

接下来看看效果图:

   

 

相比效果大家都看到了,接下来看看代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>移动端滚屏效果</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <style type="text/css">
            body,html{
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            .g-fullPage{
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            .g-fullPage div{
                width: 100%;
                height: 100%;
                text-align: center;
                line-height: 100%;
                transition: 0.5s ease-in;
            }
            .g-fullPage div:nth-child(1){
                background-color: #D5F1FD;
            }
            .g-fullPage div:nth-child(2){
                background-color: aquamarine;
            }
            .g-fullPage div:nth-child(3){
                background-color: mediumseagreen;
            }
        </style>
    </head>
    <body>
        <div class="g-fullPage">
            <div class="f-pageFirst">1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>
    <script type="text/javascript">
        /*
             mainClass      滑动父容器类名
             firstClass  第一页的类名
             num                  总页数
        */
        function fullPage(mainClass, firstClass, num) {
            var startX = 0,                //初始横坐标
                    startY = 0,                //初始纵坐标
                    marginTop = 0,        //上下滑动变量
                    touchNum = 0,            //上滑极限,是否可以上滑
                    touchFlag = true, //可滑动标志 true 可滑动,false 不可滑
                    bodyHeight = document.body.offsetHeight,
                    page = document.getElementsByClassName(mainClass)[0],
                    pageFirst = document.getElementsByClassName(firstClass)[0];
                
            //获取触摸的初识坐标
            page.addEventListener("touchstart",function(e){
                 e.preventDefault();
                startX = e.targetTouches[0].clientX;
                startY = e.targetTouches[0].clientY;
            })
            //重置触摸的坐标值
            page.addEventListener("touchend",function(e){
                 e.preventDefault();
                startX = 0;
                startY = 0;
                touchFlag = true;
            })
            
            //监听并实现 上、下 滑动效果
            page.addEventListener("touchmove",function(e){
                 e.preventDefault();
                var newX = e.targetTouches[0].clientX,
                        newY = e.targetTouches[0].clientY;
                if (newY - startY > 50) {
                    if (touchFlag == true && touchNum > 0) {
                        console.log("下滑");
                        touchFlag = false;
                        marginTop += 1;
                        touchNum -= 1;
                        pageFirst.style.marginTop = marginTop * bodyHeight+"px";
                    }
                } else if (newY - startY < -50) {
                    if (touchFlag == true && marginTop > -num+1) {
                        console.log("上滑");
                        touchFlag = false;
                        marginTop -= 1;
                        touchNum += 1;
                        pageFirst.style.marginTop = marginTop * bodyHeight+"px";
                    }
                }
            })
        }
        
        fullPage("g-fullPage", "f-pageFirst",3);
    </script>
</html>

 

很简单的一个功能,现在简略解释一下代码:

1. 监听 touchstart ,获取触摸初始坐标; 监听 touchmove,获取活动过程中的触摸点坐标,二者做差.  >0 下滑;<0 上滑

2. 当滑动纵坐标差值超过50 ,调节div的 marginTop,显示不同div内容

 

这里面有几个注意点:

1. margin、top等样式,如果写在样式表里,js获取不到,能取到兼容性也不好。具体原因这里不细说了。但是内联样式可以取到。 这里仅做提醒,避免同志们入坑。

2. 记得阻止默认事件。

 

好啦,个人能力有限,若代码有问题,希望道友们指出,我们共同学习。 喜欢我的博客的朋友可以关注我,近期会出几篇 vue2.0+vuex 的博客(react的也会有,具体看时间啦),有需要的可以过来看看吆!

以上是关于手机端实现fullPage——全屏滚动效果的主要内容,如果未能解决你的问题,请参考以下文章

用fullPage来实现全屏滚动效果

fullpage.js全屏滚动插件使用方法

学习 | jQuery全屏滚动插件FullPage.js

制作手机相册 全屏滚动插件fullpage.js

06-移动端开发教程-fullpage框架

jQuery-全屏滚动插件fullPage.jsAPI 使用方法总结