码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-05-21 19:49:44      阅读:656      评论:0      收藏:0      [点我收藏+]

标签:enter   eve   log   nbsp   hid   过程   实现   不同   原因   

封装了一个小插件模拟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——全屏滚动效果

标签:enter   eve   log   nbsp   hid   过程   实现   不同   原因   

原文地址:https://www.cnblogs.com/pengfei-nie/p/9068568.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!