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

转载于:https://www.cnblogs.com/wangjinke/p/4849834.html

总结

以上是生活随笔为你收集整理的js手机滚屏效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。