封装了一个小插件模拟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. EBS R12安装升级(FRESH)（四）

    7 升级Oracle数据库到11gR2 7.1 先打补丁7303030_zhs,9062910,8919489,8919489_ZHS ,9868229,10163753,11071569,97380 ...

  2. LeetCode(48)-Length of Last Word

    题目: Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return t ...

  3. javascript类和原型学习笔记

    js中类的所有实例对象都从同一个原型对象上继承属性.我们可以自己写一个对象创建的工厂方法来来"模拟"这种继承行为: //inherit()返回一个继承自原型对象p的属性的性对象 / ...

  4. 在Mac中使用「dd」指令烧录ISO镜像文件到U盘

    作者:超級efly   發布:2014-07-26 20:22   分類:電腦   閱讀:442   11條評論    大家在Windows系統下可以方便的使用UltraISO程式來燒錄「.ISO」, ...

  5. 自定义ViewGroup添加布局动画

    声明几个属性值: <declare-styleable name="GridImageViewGroup"> <attr name="childVert ...

  6. java的finalize方法使用

    1. finalize的作用 finalize()是Object的protected方法,子类可以覆盖该方法以实现资源清理工作,GC在回收对象之前调用该方法. finalize()与C++中的析构函数 ...

  7. mq常用命令

    IBM MQ常用命令   常用命令 创建队列管理器crtmqm –q QMgrName-q是指创建缺省的队列管理器删除队列管理器dltmqm QmgrName启动队列管理器strmqm QmgrNam ...

  8. 简单了解AJAX

    // ajax的俩个版本: var xmlhttp; if(window.xmlHttpRequest){ xmlhttp = new xmlHttpRequest(); }else{ xmlhttp ...

  9. 入职第一天：前端leader手把手教我入门Vue服务器端渲染（SSR）

    继前段时间西安电面之后顺利拿到了OFFER,今天(5月2号)是我入职第一天,在简短的内部培训了一上午后,前端leader让我先了解下什么是vue的服务器端渲染(SSR). SSR,英文全称叫 Serv ...

  10. Convert Sorted Array to Binary Search Tree(将一个有序数组转换成一颗二叉搜索树)

    Given an array where elements are sorted in ascending order, convert it to a height balanced BST. Fo ...