手机端实现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 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...
随机推荐
- MVVM With ReactiveCocoa让移动开发更简单
作者:@雷纯锋2011 MVVM是一种软件架构模式,它是 Martin Fowler 的 Presentation Model 的一种变体,最先由微软的架构师 John Gossman 在 2005 ...
- myBatis源码学习之SqlSessionFactory
上一篇博客 SqlSessionFactoryBuilder 中介绍了它的作用就是获得DefaultSqlSessionFactory SqlSessionFactory是一个接口,其具体实现类是De ...
- javascript、ruby和C性能一瞥(2)
好吧,最后让我们用C来实现,看看再能榨取多少性能.注意我没有改变算法,C的算法和之前的3种都是基本相同的: #include <stdio.h> #include <stdlib.h ...
- [Zabbix3.0 ]添加Nginx监控
通过Nginx的http_stub_status_module模块提供的状态信息来监控,所以在Agent端需要配置Nginx状态获取的脚本,和添加key信息等,然后在Server端配置Nginx的监控 ...
- windows下nginx+php
nginx能够为Web服务器节省资源,相较于我们熟悉的apache.IIS的优势,在于"反向代理"和"负载均衡".那在windows下如何来配置nginx+ph ...
- 全面解读Java NIO工作原理(1)
全面解读Java NIO工作原理(1) 2011-12-14 10:31 Rollen Holt Rollen Holt的博客 我要评论(0) 字号:T | T JDK 1.4 中引入的新输入输出 ( ...
- SQL解决"双重职位的查询"
双重身份问题: create table role_tab ( person char(5) not null, role char(1) not null ) insert into role_t ...
- Day15 Javascipt内容补充
JavaScript函数: 函数: function 函数名(a,b,c){ 执行代码 } 1,如何去找到标签 Dom直接选择器: 1,找到标签 #获取单个元素 document.getElement ...
- SQL Server 远程更新目标表数据
分享一个远程更新目标库数据的存储过程,适用于更新列名一致,主键为Int类型,可远程链接的数据库. ** 温馨提示:如需转载本文,请注明内容出处.** 本文连接:http://www.cnblogs.c ...
- Android Data Binding使用笔记
说在前面:先来三个文档,官网文档:https://developer.Android.com/topic/libraries/data-binding/index.html 官网文档的汉化版:http ...