封装了一个小插件模拟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——全屏滚动效果的更多相关文章

  1. 六一广告页H5全屏滚动效果实现

    明天就六一儿童了(放假了),在这里提前祝大家周末快乐,每逢节假日公司必然会推出h5活动页的需求,这次六一儿童节也不例外,产品这次倒是没提什么互动效果需求,只不过根据UI妹子给的设计图,图片与图片中颜色 ...

  2. 全屏滚动效果H5FullscreenPage.js

    前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...

  3. pagePiling.js - 创建漂亮的全屏滚动效果

    全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...

  4. pagePiling.js - 创建美丽的全屏滚动效果

    在线演示 在线演示 本地下载 全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主 ...

  5. jquery.fullpage 全屏滚动

    参考文档 :http://www.dowebok.com/77.html 下载地址: https://github.com/alvarotrigo/fullPage.js 1. 使用 HTML < ...

  6. fullPage全屏滚动的实现

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站. 用法: 1.引入jquery 2.引入fullPage 3.每个section代表一屏 4.js启动: ...

  7. fullPage 全屏滚动【上下滚动】效果

    由于个人能力,研究了两天,终于写出来了. 又花了一天的时间成功的将30多行脚本,改成了70多行,我也是够有心的了. 那么接下来就是我制作这个效果的全部过程. 那一年我十七,她十八,在那个夏天里,我们, ...

  8. 用fullPage来实现全屏滚动效果

    [注意]所有的page要用div包裹,id为fullpage.不能直接包在body中 [使用fullpage的步骤] 1.导入 JQuery.js,fullpage.js,fullpage.css   ...

  9. FullPage.js – 轻松实现全屏滚动（单页网站）效果

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...

随机推荐

  1. Mahout SlopOne

    关于推荐引擎 如今的互联网中,无论是电子商务还是社交网络,对数据挖掘的需求都越来越大了,而推荐引擎正是数据挖掘完美体现:通过分析用户历史行为,将他可能喜欢内容推送给他,能产生相当好的用户体验,这就是推 ...

  2. web报表工具FineReport最经常用到部分函数详解

    之前分别列出来了finereport常用的文本.时间函数的解释,这里应广大朋友的要求,整理了finereport最常用到的一些函数! SUM SUM(number1,number2,-):求一个指定单 ...

  3. 【省带宽、压成本专题】深入解析 H.265 编码模式，带你了解 Apple 全面推进 H.265 的原因

    过去几年,又拍云一直在点播.直播等视频应用方面潜心钻研,取得了不俗的成果.我们结合点播.直播.短视频等业务中的用户场景,推出了"省带宽.压成本"系列文章,从编码技术.网络架构等角度 ...

  4. jdk1.7 tomcat-7安装

    由于软件下载地址经常有变动,所以不能直接wget,还是直接到网上点击下载 下载jdk http://www.oracle.com/technetwork/java/javase/downloads/j ...

  5. Mongodb3.6 快速入门（一）

    一.安装 官网下载地址 文章中用的3.6community server 64 位. 安装完成后的目录如下: 二.启动Mongodb 有多种方式可以启动Mongodb,但在实际项目中,主要还是通过配置 ...

  6. VS2010断点调试技巧

    设置断点:在如下图中的红色圆点处设置断点,红色圆点表示已经在这行设置断点.快捷键F9.   启动调试:按F5或者点击左边红框中的按钮.右边框是开始执行(不调试)Ctrl+F5. 调试工具栏:下面是工具 ...

  7. 【图文详解】HDFS基本原理

    本文主要详述了HDFS的组成结构,客户端上传下载的过程,以及HDFS的高可用和联邦HDFS等内容.若有不当之处还请留言指出. 当数据集大小超过一台独立的物理计算机的存储能力时,就有必要对它进行分区,并 ...

  8. IdentityServer4实战 - AccessToken 生命周期分析

    一.前言 IdentityServer4实战这个系列主要介绍一些在IdentityServer4(后文称:ids4),在实际使用过程中容易出现的问题,以及使用技巧,不定期更新,谢谢大家关注.使用过id ...

  9. django1.8升级1.9的几个问题

    1.URL Pattern警告,旧式的URL定义方法将在1.10版本中被废止,所以这个版本仅仅是警告,不过这个警告让我看到了升级1.9这个非LTS版本的意义. 2.Django自身所带Models变化 ...

  10. CSS后代选择器“空格”和“>”的使用辨析

    要点: 1. "空格":包含子孙 2. ">":含子不含孙 举个栗子: html代码如下 <body> <div class=" ...