js手机滚屏效果
原文地址:https://github.com/yanhaijing/zepto.fullpage
第一步:基于移动端的浏览体验,在头部添加浏览器渲染的分辨率
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
第二步:引入相关文件
<link rel="stylesheet" href="../src/zepto.fullpage.css">
<script src="js/zepto.min.js"></script>
<script src="../src/zepto.fullpage.js"></script>
第三步:编写基本结构html代码
<div class="wp">
<div class="wp-inner">
<div class="page page1">1</div>
<div class="page page2">2</div>
<div class="page page3">3</div>
<div class="page page4">4</div>
</div>
</div>
第四步:写入启动代码
<script>
$('.wp-inner').fullpage();
</script>
第五步:编写必须的css样式
.wp{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.page{
font-size: 72px;
line-height: 320px;
text-align: center;
}
.page1{
background: red;
}
.page2{
background: yellow;
}
.page3{
background: maroon;
}
.page4{
background: green;
}
其他api参数请看官方网站:https://github.com/yanhaijing/zepto.fullpage/blob/master/doc/api.md