封装了一个小插件模拟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. Android特效专辑(五)——自定义圆形头像和仿MIUI卸载动画—粒子爆炸

    Android特效专辑(五)--自定义圆形头像和仿MIUI卸载动画-粒子爆炸 好的,各位亲爱的朋友,今天讲的特效还是比较炫的,首先,我们会讲一个自定义圆形的imageView,接着,我们会来实现粒子爆 ...

  2. Hadoop基本知识,(以及MR编程原理)

     hadoop核心是:MapReduce和HDFS (对应着job执行(程序)和文件存储系统(数据的输入和输出)) CRC32作数据交验:在文件Block写入的时候除了写入数据还会写入交验信息,在读取 ...

  3. Effective STL 为包含指针的关联容器指定比较类型

    // 为包含指针的关联容器指定比较类型.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <set> #incl ...

  4. json的命名空间

    <script>var zgz={}; zgz.common={ getByClass: function () { }, myAddEvent: function () { }}; zg ...

  5. Python中导入第三方声源库Acoular的逻辑解释以及Acoular的下载

    [声明]欢迎转载,但请保留文章原始出处→_→ 秦学苦练:http://www.cnblogs.com/Qinstudy/ 文章来源:http://www.cnblogs.com/Qinstudy/p/ ...

  6. Oracle面试过程中常见的二十个问题

    1.冷备份和热备份的不同点以及各自的优点  解答:热备份针对归档模式的数据库,在数据库仍旧处于工作状态时进行备份.而冷备份指在数据库关闭后,进行备份,适用于所有模式的数据库.热备份的优点在于当备份时, ...

  7. Mybatis 系列2

    上篇文章 写了一个Demo简单体现了一下Mybatis的流程.本次,将简单介绍一下Mybatis的配置文件: 上次例子中,我们以 SqlSessionFactoryBuilder 去创建 SqlSes ...

  8. Spring Security简明实践及相关国际化处理

    别人的都是最佳实践,因为我目前的设置没有按照参考文档推荐,还是采用DelegatingFilterProxy,所以我只能说简明实践.先贴我的applicationContext-security.xm ...

  9. Bear and Friendship Condition-HZUN寒假集训

    Bear and Friendship Condition time limit per test 1 secondmemory limit per test 256 megabytesinput s ...

  10. 导入项目 idea

    下的java核心编程的源码,只有java文件,没有idea或者eclipse的项目结构信息. 分别用eclipse和idea打开了一遍,方便学习调试. 项目文件夹:E:\学习资料\Java\语法\ja ...