原文地址：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手机滚屏效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。