移动web时代,学会做一些简单H5页面会很受用。比如最常见的活动营销简历H5页面是一个全屏滚动页面(fullpage)。以下就是一个简单的例子。 DEMO:Demo地址
空的页面
新建一个空的html5页面,在head标签里面加入两个meta标签
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
第一个标签是引导浏览器使用最新内核。
第二个标签是控制设备的视口宽度为屏幕宽度,然后静止缩放,模拟原生app的感觉。
这个是apple公司定的规则,并没有写入w3c规范,但是成为了业内标准。浏览器厂商都约定俗成了。
就是这样的一个空的页面了。
css html
<div class="main-wrap">
<div class="main">
<div class="section a">
<h1>这是屌屌的第一屏页面222</h1>
</div>
<div class="section b">
<h1>这是霸气的第二屏页面</h1>
</div>
<div class="section c">
<h1>这是呵呵的第三个屏页面</h1>
</div>
</div>
</div>
body{
padding: 0;
margin: 0;
overflow: hidden
}
.section{
width: 100vw;
height: 100vh;
}
h1{
margin: 0px;
}
.main-wrap{
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
}
.main {
position: absolute;
top: 0px;
left: 0px;
transition: 500ms cubic-bezier(0.86, 0, 0.07, 1);
}
先解释两个css3属性,width: 100vw
是指宽度和设备宽一致同理100vh
,transition
是css3
的一个属性过度。cubic-bezier(0.86, 0, 0.07, 1);
是一个自定义 贝泽尔曲线。这是一个磁性滚动的过度,嗯,参数我是抄锤子科技的。
首先清下body和h1的内置样式。main-wrap
是最外面的一个DOM节点相当于窗口的作用,是固定不动的,宽高和设备一致。main
就是包含屏幕块的标签,操作top值,实现动画。写过Banner动画的同学肯定不陌生。类似的原理。然后每个section
就是一个屏的内容。
手势库
移动端和PC端在事件中有很多不同,比如没有hover事件了,click比tap慢几百毫秒了,等等,反正坑很多,同志一起好好学吧~。移动端一共有4种触摸事件:
touchstart,在用户的手指触摸屏幕的瞬间触发。
touchmove,在用户移动手机的过程中连续触发。
touchend,用户的手指离开屏幕的瞬间触发。ios离开webview边界不会触发。
touchcancel,很特殊,浏览器差异,(不需理会)。
任何手势就是计算这几个事件内的值加减乘除来判断各种手势。
最直接的就是引入一个开源的手势库。Hammer就是我比较推荐的一个手势库。
我用的是最新版2.0.4
Hammer介绍页
JS部分
var sHeight = document.querySelector('.a').clientHeight;
//获取一屏的高度,判断该移动多少
var sLength = document.querySelectorAll('.section').length;
//判断有几屏页面
var sIndex = 0;//标记当前第几页
var sScroll = false;//滚动时就不再触发事件,防止误点
var main = document.querySelector('.main'); //需要移动的DOM
window.onmousewheel = function(e){
//PC端的滚轮事件,嗯不兼容火狐
if(!sScroll){
if(e.wheelDelta>0){
//上一页
if(sIndex == 0){return; }
sIndex--;
scrollTo(sIndex);
}else{
//下一页
if(sIndex == sLength-1){return;}
sIndex++;
scrollTo(sIndex);
}
}
}
function scrollTo(i){
//操作动画的函数
sScroll = true;
main.style.top = -i*sHeight + 'px';
setTimeout(function(){sScroll = false}, 700);
}
var hamm = new Hammer(document.querySelector('.main-wrap'));
hamm.get('swipe').set({ direction: Hammer.DIRECTION_ALL});
//hammer默认关闭上下swipe 设置开启上下滑屏
hamm.on('swipedown', function(){
if(!sScroll){
//上一页
if(sIndex == 0){return; }
sIndex--;
scrollTo(sIndex);
}
});
hamm.on('swipeup', function(){
if(!sScroll){
//下一页
if(sIndex == sLength-1){return;}
sIndex++;
scrollTo(sIndex);
}
});
最后放张完整的js部分的图:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。