这里记录下fullPage.js的配置
推荐网站：https://www.cnblogs.com/wanghuih/p/6520498.html
下面来看下列表：
具体包括：选项，方法和回调函数
配置
1、选项
| verticalCentered | 字符串 | true | 内容是否垂直居中 |
| resize | 布尔值 | false | 字体是否随着窗口缩放而缩放 |
| slidesColor | 函数 | 无 | 设置背景颜色 |
| anchors | 数组 | 无 | 定义锚链接 |
| scrollingSpeed | 整数 | 700 | 滚动速度，单位为毫秒 |
| easing | 字符串 | easeInQuart | 滚动动画方式 |
| menu | 布尔值 | false | 绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动 |
| navigation | 布尔值 | false | 是否显示项目导航 |
| navigationPosition | 字符串 | right | 项目导航的位置，可选 left 或 right |
| navigationColor | 字符串 | #000 | 项目导航的颜色 |
| navigationTooltips | 数组 | 空 | 项目导航的 tip |
| slidesNavigation | 布尔值 | false | 是否显示左右滑块的项目导航 |
| slidesNavPosition | 字符串 | bottom | 左右滑块的项目导航的位置，可选 top 或 bottom |
| controlArrowColor | 字符串 | #fff | 左右滑块的箭头的背景颜色 |
| loopBottom | 布尔值 | false | 滚动到最底部后是否滚回顶部 |
| loopTop | 布尔值 | false | 滚动到最顶部后是否滚底部 |
| loopHorizontal | 布尔值 | true | 左右滑块是否循环滑动 |
| autoScrolling | 布尔值 | true | 是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条 |
| scrollOverflow | 布尔值 | false | 内容超过满屏后是否显示滚动条 |
| css3 | 布尔值 | false | 是否使用 CSS3 transforms 滚动 |
| paddingTop | 字符串 | 0 | 与顶部的距离 |
| paddingBottom | 字符串 | 0 | 与底部距离 |
| fixedElements | 字符串 | 无 | |
| normalScrollElements | 无 | ||
| keyboardScrolling | 布尔值 | true | 是否使用键盘方向键导航 |
| touchSensitivity | 整数 | 5 | |
| continuousVertical | 布尔值 | false | 是否循环滚动，与 loopTop 及 loopBottom 不兼容 |
| animateAnchor | 布尔值 | true | |
| normalScrollElementTouchThreshold | 整数 | 5 |
2、方法
| moveSectionUp() | 向上滚动 |
| moveSectionDown() | 向下滚动 |
| moveTo(section, slide) | 滚动到 |
| moveSlideRight() | slide 向右滚动 |
| moveSlideLeft() | slide 向左滚动 |
| setAutoScrolling() | 设置页面滚动方式，设置为 true 时自动滚动 |
| setAllowScrolling() | 添加或删除鼠标滚轮/触控板控制 |
| setKeyboardScrolling() | 添加或删除键盘方向键控制 |
| setScrollingSpeed() | 定义以毫秒为单位的滚动速度 |
3、回调函数
| afterLoad | 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算 |
| onLeave | 滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；
nextIndex 是滚动到的“页面”的序号，从1开始计算； direction 判断往上滚动还是往下滚动，值是 up 或 down。 |
| afterRender | 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数 |
| afterSlideLoad | 滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数 |
| onSlideLeave | 某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数 |
下面来看案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>fullpage_test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css">
<style >
body {
text-align: center;
font-size: 12px;
color: white;
}
.section1 {
background-color: orange;
text-align: center;
}
.section2 {
background-color: red;
text-align: center;
}
.section3 {
background-color: green;
text-align: center;
}
.section4 {
background-color: gray;
text-align: center;
}
.section5 {
background-color: black;
text-align: center;
}
.slide{
background-color:pink;}
#header {
font-size: 50px;
position: fixed;
top: 0;
right: 50px;
}
#fullpageMenu{
font-size:20px;
position:fixed;
top:50px;
z-index:999;
list-style-type:none;
}
#fullpageMenu a{
text-align:left;
text-decoration:none;}
#fullpageMenu a:hover{
color:#FFF;
}
</style>
</head>
<body>
<div id="header">header</div>
<ul id="fullpageMenu">
<li data-menuanchor="page1" class="active"><a href="#page1">page1</a></li>
<li data-menuanchor="page2"><a href="#page2">page2</a></li>
<li data-menuanchor="page3"><a href="#page3">page3</a></li>
<li data-menuanchor="page4"><a href="#page4">page4</a></li>
<li data-menuanchor="page5"><a href="#page5">page5</a></li>
</ul>
<div id="fullpage">
<div class="section ">
<h1> first page</h1>
</div>
<div class="section section2">
<div class="slide slide1">slide1</div>
<div class="slide">slide1</div>
<div class="slide">slide1</div>
<div class="slide">slide1</div>
<div class="slide">slide1</div>
</div>
<div class="section section3">
<h1>third page</h1>
</div>
<div class="section section4">
<h1> forth page</h1>
</div>
<div class="section section5">
<h1> fifth page</h1>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js">
</script>
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
sectionsColor:['red','blue','yellow','pink','black'],
//resize:false,
//scrollingSpeed:2000, //滚动时间，2000就是两秒
anchors:['page1','page2','page3','page4','page5'],
/*设置锚链接 主要是在收藏某一页的时候，当再次打开的时候，它不会由第一页滑到这一页，而是直接出现这一页*/
// lockAnchors:true,/*锁定锚节点*/
//loopTop:true, /* 顶部循环滚动是跳往底部的页面*/
/* loopBottom:true, 底部循环滚动，同样是跳往页面
loopHorizontal:false, 幻灯片循环滚动
*/
//autoscrolling：true, /*页面不会按照插件的滚动方式滚动，而是按照滚动条的滚动方式滚动*/c'C
//scrollBar:true, /*此设置项为true，则会出现滚动条但还是按照插件的滚动方式*/
fixedElements:'#header', //设置某一元素固定于某一位置，通过JQuary捕捉定位到某一元素（如这个实例中的header）
//continuousVertical:true, /*循环滚动，与loopTop和loopBottom不兼容，不能同时设置，经测试如果同时设置则会有looopTop或者loopBottom的效果*/
//menu:'#fullpageMenu', //为菜单选项，在前面的ul中要把锚链接相应的链接起来。
navigation:true, //导航是否显示
navigationPosition:'right', //导航条的位置，默认是右
navigationTooltips:['page1','page2','page3','page4','page5'],//导航条显示的内容
showActiveTooltip:true, //导航条内容是否显示，如为false则须将鼠标放到导航条上才能显示
slidesNavigation:true, //幻灯片导航条是否显示
slidesNavPosition:'top', //幻灯片导航条的位置
});
});
</script>
</body>
</html>
.
相关推荐
在这个`fullPage.js-master`案例中，我们将深入探讨如何使用这个插件，以及它所包含的各种功能和配置选项。 **1. 安装fullPage.js** 首先，你需要将`fullPage.js`库和其依赖的jQuery库添加到你的HTML文件中。你...
社区中有很多使用jQuery.fullPage.min.js构建的实例，这些案例提供了灵感和学习资源。此外，开发者可以在GitHub等平台上找到相关的讨论和解决方案。 综上所述，jQuery.fullPage.min.js为创建全屏滚动网站提供了...
**全屏滚动插件fullpage....总结，fullpage.js是构建全屏滚动购物网站宣传页面的理想工具，其强大的功能和灵活的配置使得设计富有视觉冲击力的网页变得简单。通过深入学习和实践，你可以创造出更加引人入胜的用户体验。
这些文件很可能是包含fullPage.js插件的示例页面，每个文件可能展示了一种不同的滚动效果或者布局配置。通过查看这些示例，开发者可以更好地理解和学习如何在自己的项目中运用fullPage.js。例如，"xw素材.htm"可能是...
在这个案例中，`fullPage.js` 被用来构建一个具有项目菜单和项目符号的互动界面，用户可以通过这些元素轻松导航页面，同时享受无缝的循环滚动体验。 `fullPage.js` 的主要特性包括： 1. **全屏滑动**：`fullPage....
- **初始化插件**：在JavaScript中调用`$.fn.fullpage()`函数，配置插件参数。 - **参数配置**：例如，可以设置`scrollBar:true`显示滚动条，`menu:'#myMenu'`关联导航菜单等。 4. **代码案例**： ```javascript...
之后，通过在JavaScript中初始化fullPage插件，配置相应的选项，实现全屏滚动效果： ```javascript $(document).ready(function() { $('#fullpage').fullpage({ anchors: ['section1', 'section2', 'section3'], ...
Fullpage.js库提供了许多配置选项和API，比如设置滚动速度、启用或禁用自动滚动、添加自定义滚动效果等。开发者可能根据需求进行了定制，以实现特定的交互逻辑，如点击按钮跳转到特定幻灯片，或者根据用户操作显示和...
1. **基础知识**：书中首先介绍了Vue.js2的基础知识，包括安装配置、基本语法等，为后续深入学习打下坚实基础。 2. **组件系统**：详细介绍Vue.js2中的组件系统，包括如何创建组件、组件之间的通信方式等内容。 3. *...
在这个案例中，实现这种效果主要依赖于两个JavaScript库：`jquery-1.11.1.js`和`jquery.fullPage.js`。 **jQuery** 是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。`jquery-...
【酷炫的网络公司官网模板】是一个专为网络公司设计的动态网站模板，它利用了高效且功能强大的jQuery库，特别是引入了`jquery.fullPage.min.js`插件，结合JavaScript（jq）技术，为用户提供了丰富的交互体验和流畅的...
接着，为要实现全屏滚动的容器添加`id="fullpage"`，并根据需求配置选项。例如： ```html <div id="fullpage"> <!-- 各个全屏section在此处 --> ``` 初始化fullPage插件： ```javascript $(document)....
4. jquery.fullPage.js、jquery.fullPage.min.js：这是jQuery全屏滚动插件的主要JavaScript文件，前者是未压缩的源代码，方便调试和理解；后者是压缩过的版本，用于生产环境，以减少页面加载时间。 5. README.md：...
然后，通过JavaScript调用$.fn.fullpage()函数初始化插件，并设置必要的配置参数，如滚动方向、动画时间等。 例如： ```html <div id="fullpage"> 页面1内容 页面2内容 页面3内容 ``` ```javascript $...
`$.fn.fullpage` 是调用 fullPage.js 插件的初始化方法，配置参数如 `verticalCentered`, `anchors`, `navigation` 和 `navigationTooltips` 用于控制页面布局、锚点链接和导航条。 7. **浏览器兼容性处理**：针对 ...
5. **滚动展示**：随着网页滚动，内容可以平滑过渡，这种滚动特效通常由JavaScript库如fullPage.js或ScrollMagic实现，为用户带来流畅的浏览体验。 6. **花哨效果**：模板可能包含一些视觉特效，如过渡动画、淡入...
理解jQuery的基本用法和fullPage插件的配置，是实现此类项目的前提，而不断的实践和调试则会进一步提升我们的技能水平。在实际开发中，我们还需要考虑浏览器兼容性、性能优化以及用户体验等多方面因素，以打造出更加...
在本案例中，我们将讨论如何利用jQuery的fullPage插件实现这一效果。 jQuery fullPage是一个强大的JavaScript库，专门用于创建全屏滚动的单页面网站。这个插件提供了丰富的选项和回调函数，以适应各种设计需求。...
微信小程序使用一套自有的JS框架，它基于WXML（WeiXin Markup Language）和WXSS（WeiXin Style Sheets）构建用户界面，而用JavaScript处理业务逻辑和数据绑定。WXML负责结构，类似于HTML，但有一些特定的标签用于与...