搜索内容：
时间：2019-08-02
编辑:网站制作公司
802
0
目前，越来越多的网站是基于单页面方法（称为单页或单页网站）设计的。在本文中，我们将探讨如何利用fullPage.js为演示站点创建这样的体验 。
重庆网站定制看看我们将在此Codepen演示中构建的内容。此外，可以在此Github存储库中找到此演示的所有文件。
fullPage.js是一个基于jQuery的插件，允许我们构建单页滚动网站。由Web开发人员Alvaro Trigo创建，我们将在接下来的部分中看到，它提供了许多不同的自定义选项。
此外，这个插件提供了组织良好的文档和许多动手实例。
令人高兴的是，它不仅适用于所有现代浏览器，而且适用于IE 8和Opera 12等一些较旧的示例。
最后，您可能想看看它的Wordpress版本。
要开始使用fullPage，您必须在项目中下载并安装以下文件：
jQuery库（≥1.6.0）
在jquery.fullPage.cssCSS文件
该jquery.fullPage.jsJS文件或它的精缩版（即jquery.fullPage.min.js）
您可以通过访问Github仓库，使用包管理器（例如Bower），或通过CDN（例如cdnjs）加载必要的资产来获取这些文件的副本。在本教程中，我们将选择最后一个选项。
在<head> HTML文档中放置一个CSS文件的链接：
1 | <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css" rel="stylesheet"> |
...和结束<body>标记之前的JS脚本：
1 2 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script> |
现在，我们已准备好深入了解插件！
首先，我们必须指定我们网站的各个部分。为此，我们将section类分配给目标元素，并将它们包装在具有唯一标识符的容器中。稍后，此标识符将用于初始化fullPage的实例。
默认情况下，插件将第一部分视为活动部分。但是，如果我们想要，我们可以通过将active类添加到所需的部分来改变该行为。
这是我们示例所需的HTML结构：
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div id="fullPage"> <section class="vertical-scrolling"> <h2>fullPage.js</h2> <h3>This is the first section</h3> <div class="scroll-icon"> <p>Jump into the last slide</p> <a href="#fifthSection/1" class="icon-up-open-big"></a </div> </section> <section class="vertical-scrolling"> <!-- content here --> </section> <section class="vertical-scrolling"> <!-- content here --> </section> <section class="vertical-scrolling"> <!-- content here --> </section> <section class="vertical-scrolling"> <!-- content here --> </section> </div> |
请注意，所有部分共享一个公共类名（即vertical-scrolling），我们选择这些名称与预定义的名称（即）不同section。在这种情况下，我们需要在初始化过程中通知插件有关此更改。
这些垂直堆叠的部分中的每一个可以可选地是具有一个或多个滑块的水平滑块。为了识别幻灯片，我们将slides类应用于目标元素并将它们嵌套在相应的部分中。
此外，重要的是要提到，从技术上讲，第一张幻灯片等于父节。我们很快就会检查这种行为！
回到我们的示例，下面的代码片段显示了我们如何在第五部分中设置两个幻灯片：
01 02 03 04 05 06 07 08 09 10 11 | <section class="vertical-scrolling"> <div class="horizontal-scrolling"> <h2>fullPage.js</h2> <h3>This is the fifth section and it contains the first slide</h3> </div> <div class="horizontal-scrolling"> <h2>fullPage.js</h2> <h3>This is the second slide</h3> <p class="end">Thank you!</p> </div> </section> |
再次，正如您所看到的，我们已经为幻灯片提供了自定义类名（即horizontal-scrolling）。
我们可以利用可用的配置参数来控制我们的部分和幻灯片的外观。其中一个参数是sectionColor属性，它为我们提供了一种background-color为每个部分定义CSS 属性的简便方法。
此外，我们可以设置自己的样式，以进一步自定义页面。例如，假设我们要将完整的背景图像应用于第二部分。以下是我们如何实现它：
1 2 3 | section:nth-of-type(2) { background: url('https://unsplash.it/1910/1221?image=626') no-repeat center / cover; } |
该插件提供了许多用于在部分和幻灯片中移动的内置选项。其中一些选项默认激活（例如鼠标滚轮和键盘），而其他选项则通过配置对象（例如圆点）手动触发。
在我们的项目中，我们希望以点的形式添加额外的导航。此外，我们选择隐藏通常出现在滑块上的左右箭头。因此，在启用点导航后，我们可以通过覆盖默认样式来更改其外观。以下是新规则：
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 | #fp-nav ul li a span, .fp-slidesNav ul li a span { background: white; width: 8px; height: 8px; margin: -4px 0 0 -4px; }
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: transparent; box-sizing: border-box; border: 1px solid #24221F; } |
以下是一个屏幕截图，演示了我们所做的更改：
请注意，我们在自定义样式表中包含上述规则，因此避免更改插件的CSS文件。
fullPage.js允许我们在滚动不同部分时更改网站的URL。为此，我们使用anchors参数。更具体地说，此参数是一个数组，用于保存需要在每个部分的URL上显示的锚链接。例如，在我们的示例中，我们指定以下锚链接（应该是唯一的）：
1 | anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection'] |
完成后，当我们访问第一部分时，站点URL将#firstSection 在末尾具有标识符，在第二部分URL将结束 #secondSection ，依此类推。
同样，插件也会在我们滚动幻灯片时修改URL。但是，在这一点上，我们必须回想一下，基本上第一张幻灯片（索引为0）是相关的父节。考虑到这一点，在我们的项目中，当我们处于第五部分的第一张幻灯片时，URL将以#fifthSection锚链接结束。加载同一部分的第二张幻灯片将触发一个结束的URL，#fifthSection/1 因为第二张幻灯片（索引为1）实际上是我们的“第一张”幻灯片。
值得一提的是，我们可以通过data-anchor使用所需的锚名称（也应该是唯一的）添加属性来修改幻灯片的锚点，就像下面的示例一样：
<div class="horizontal-scrolling" data-anchor="firstSlide"><!-- more content here --></div>
注意：要在滚动时查看更改的URL，请查看 演示的Debug视图。
为了更好地理解我们如何将菜单链接到fullPage，让我们看看我们的固定标题。以下屏幕截图显示了它的显示方式：
和HTML：
01 02 03 04 05 06 07 08 09 10 | <div class="header-top clearfix"> <h1 class="l-left"> <a href="#firstSection">Your Logo</a> </h1> <a class="l-right toggle-menu" href="#"> <i></i> <i></i> <i></i> </a> </div> |
只要触发汉堡菜单图标，就会出现主菜单覆盖：
这是与此菜单相关的代码：
01 02 03 04 05 06 07 08 09 10 11 | <nav class="hide"> <ul id="menu"> <li data-menuanchor="firstSection"> <a href="#firstSection" title="First Section">First Section</a> </li> <li data-menuanchor="secondSection"> <a href="#secondSection" title="Second Section">Second Section</a> </li> <!-- more list items here --> </ul> </nav> |
因此，要让fullPage知道菜单，我们必须使用menu配置属性进行注册。接下来，我们需要将菜单项链接到相关部分。为此，我们将data-menuanchor 属性添加到项目中，并将相应的链接作为值。只要这些值匹配，插件就会将active类（当我们滚动时）附加到相应的菜单项。
请注意，该插件尚未将该active类附加到幻灯片。要解决这个问题，我们可以使用jQuery（最佳解决方案）或CSS。在我们的示例中，我们通过添加以下CSS规则来解决此问题：
1 2 3 | body.fp-viewing-fifthSection-1 #menu li:last-child a { background: #453659; } |
看下面的结果：
实际上，我们没有将active类添加到第二张幻灯片中。通过利用body插件附加到每个部分和幻灯片的不同类，我们只给出了该项的类的样式active。
注意：我们不会进一步关注此菜单的工作原理，因为它超出了本教程的范围。
在afterLoad一次部加载回调被触发，onLeave 回调一旦用户离开它。
在我们的项目中，我们在加载第五个部分时隐藏垂直点导航：
以下是我们如何实现它：
01 02 03 04 05 06 07 08 09 10 11 | afterLoad: function(anchorLink, index) { if (index == 5) { $('#fp-nav').hide(); } }
onLeave: function(index, nextIndex, direction) { if(index == 5) { $('#fp-nav').show(); } } |
在afterSlideLoad当幻灯片被加载并触发回调onSlideLeave回调当用户离开它。
在我们的例子中，我们专注于第二张幻灯片，以执行许多不同的操作。例如，一旦载入幻灯片，我们就无法向上滚动。此外，我们更改background-color此幻灯片的属性以及属于它的元素的外观。
我们使用的部分代码如下所示：
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 | afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) { if(anchorLink == 'fifthSection' && slideIndex == 1) { $.fn.fullpage.setAllowScrolling(false, 'up'); $(this).css('background', '#374140'); $(this).find('h2').css('color', 'white'); $(this).find('h3').css('color', 'white'); $(this).find('p').css({ 'color': '#DC3522', 'opacity': 1, 'transform': 'translateY(0)' }); } }
onSlideLeave: function( anchorLink, index, slideIndex, direction) { if(anchorLink == 'fifthSection' && slideIndex == 1) { $.fn.fullpage.setAllowScrolling(true, 'up'); } } |
这是触发fullPage功能的最后一步。在这里，我们将所有自定义作为配置对象的一部分传递。请查看下面的相关代码段：
1 2 3 4 5 6 | $('#fullpage').fullpage({ sectionSelector: '.vertical-scrolling', slideSelector: '.horizontal-scrolling', controlArrows: false // more options here }); |
重庆网站定制在本教程中，我们快速浏览了fullPage.js jQuery插件，并学习了如何构建响应式整页滚动网站。重要的是要了解这种类型的网站并不适合所有情况。除了具有吸引力的设计外，它们还有许多限制，并且它们的可维护性很难，特别是对于动态站点。此外，这种格式可能导致SEO的并发症。
3
s后返回登录
3
s后返回登录
