手机端实现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——全屏滚动效果的更多相关文章
- 六一广告页H5全屏滚动效果实现
明天就六一儿童了(放假了),在这里提前祝大家周末快乐,每逢节假日公司必然会推出h5活动页的需求,这次六一儿童节也不例外,产品这次倒是没提什么互动效果需求,只不过根据UI妹子给的设计图,图片与图片中颜色 ...
- 全屏滚动效果H5FullscreenPage.js
前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...
- pagePiling.js - 创建漂亮的全屏滚动效果
全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...
- pagePiling.js - 创建美丽的全屏滚动效果
在线演示 在线演示 本地下载 全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主 ...
- jquery.fullpage 全屏滚动
参考文档 :http://www.dowebok.com/77.html 下载地址: https://github.com/alvarotrigo/fullPage.js 1. 使用 HTML < ...
- fullPage全屏滚动的实现
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站. 用法: 1.引入jquery 2.引入fullPage 3.每个section代表一屏 4.js启动: ...
- fullPage 全屏滚动【上下滚动】效果
由于个人能力,研究了两天,终于写出来了. 又花了一天的时间成功的将30多行脚本,改成了70多行,我也是够有心的了. 那么接下来就是我制作这个效果的全部过程. 那一年我十七,她十八,在那个夏天里,我们, ...
- 用fullPage来实现全屏滚动效果
[注意]所有的page要用div包裹,id为fullpage.不能直接包在body中 [使用fullpage的步骤] 1.导入 JQuery.js,fullpage.js,fullpage.css ...
- FullPage.js – 轻松实现全屏滚动（单页网站）效果
FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...
随机推荐
- Android特效专辑(五)——自定义圆形头像和仿MIUI卸载动画—粒子爆炸
Android特效专辑(五)--自定义圆形头像和仿MIUI卸载动画-粒子爆炸 好的,各位亲爱的朋友,今天讲的特效还是比较炫的,首先,我们会讲一个自定义圆形的imageView,接着,我们会来实现粒子爆 ...
- Hadoop基本知识，（以及MR编程原理）
hadoop核心是:MapReduce和HDFS (对应着job执行(程序)和文件存储系统(数据的输入和输出)) CRC32作数据交验:在文件Block写入的时候除了写入数据还会写入交验信息,在读取 ...
- Effective STL 为包含指针的关联容器指定比较类型
// 为包含指针的关联容器指定比较类型.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <set> #incl ...
- json的命名空间
<script>var zgz={}; zgz.common={ getByClass: function () { }, myAddEvent: function () { }}; zg ...
- Python中导入第三方声源库Acoular的逻辑解释以及Acoular的下载
[声明]欢迎转载,但请保留文章原始出处→_→ 秦学苦练:http://www.cnblogs.com/Qinstudy/ 文章来源:http://www.cnblogs.com/Qinstudy/p/ ...
- Oracle面试过程中常见的二十个问题
1.冷备份和热备份的不同点以及各自的优点 解答:热备份针对归档模式的数据库,在数据库仍旧处于工作状态时进行备份.而冷备份指在数据库关闭后,进行备份,适用于所有模式的数据库.热备份的优点在于当备份时, ...
- Mybatis 系列2
上篇文章 写了一个Demo简单体现了一下Mybatis的流程.本次,将简单介绍一下Mybatis的配置文件: 上次例子中,我们以 SqlSessionFactoryBuilder 去创建 SqlSes ...
- Spring Security简明实践及相关国际化处理
别人的都是最佳实践,因为我目前的设置没有按照参考文档推荐,还是采用DelegatingFilterProxy,所以我只能说简明实践.先贴我的applicationContext-security.xm ...
- Bear and Friendship Condition-HZUN寒假集训
Bear and Friendship Condition time limit per test 1 secondmemory limit per test 256 megabytesinput s ...
- 导入项目 idea
下的java核心编程的源码,只有java文件,没有idea或者eclipse的项目结构信息. 分别用eclipse和idea打开了一遍,方便学习调试. 项目文件夹:E:\学习资料\Java\语法\ja ...