fullPage.js 是一个功能丰富的全屏滚动插件，主要功能有：
![[php框架] Smarty基础商品教程 Smarty入门教程 Smarty框架教程 共10课](https://jy.tp.yuanmeng.life/uploads/images/20210319/f47dc487eb949895833cd962fddc6a8b.jpg)
附件
<ul class='ul_demo'>
<li>支持鼠标滚动</li>
<li>支持前进后退和键盘控制</li>
<li>多个回调函数</li>
<li>支持手机、平板触摸事件</li>
<li>支持 CSS3 动画</li>
<li>支持窗口缩放</li>
<li>窗口缩放时自动调整</li>
<li>可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等</li>
</ul><div id="sucaihuo">
<div class="section">
<h3>第一屏</h3>
</div>
<div class="section">
<h3>第二屏</h3>
</div>
......
</div><link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.js"></script>
<!-- jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件 -->
<script src="js/jquery.easings.min.js"></script>
<!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 -->
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.fullPage.js"></script>每个 section 代表一屏，默认显示“第一屏”，若要指定加载某一屏，可以在对应的 section 加上 class=”active”，如：
<div class="section active">第三屏</div>调用fullpage.js非常简单：
$(function(){
$('#dowebok').fullpage();
});| 参数 | 描述 | 默认值 |
| verticalCentered | 内容是否垂直居中 | true |
| resize | 字体是否随着窗口缩放而缩放 | false |
| slidesColor | 设置背景颜色 | - |
| anchors | 定义锚链接 | - |
| scrollingSpeed | 滚动速度，单位为毫秒 | 700 |
| easing | 滚动动画方式 | easeInQuart |
| menu | 绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动 | false |
| navigation | 是否显示项目导航 | false |
| navigationPosition | 项目导航的位置，可选 left 或 right | right |
| navigationColor | 项目导航的颜色 | #000 |
| navigationTooltips | 项目导航的 tip | - |
*
回帖描述：*
链接类型：*
下载链接：
验证通过自动获取下载链接
*
描述：*
回帖描述：*
链接类型：*
阅读权限：*
下载链接：
微信客服
QQ客服
QQ群
