fullPage.js 中文文档

最新推荐文章于 2024-08-08 08:32:23 发布

weixin_33824363

最新推荐文章于 2024-08-08 08:32:23 发布

阅读量6.9k

点赞数

文章标签： javascript ui python ViewUI

原文链接：https://my.oschina.net/swmhxhs/blog/1301761

版权

fullPage.js 是一个用于创建全屏滚动网站的JavaScript库，支持多种浏览器，包括旧版。它提供了全屏滚动、响应式设计、触摸支持、自动播放/暂停媒体等功能。初始化fullPage.js需要包含jQuery、js和css文件，然后通过$(document).ready调用。可设置选项如滚动速度、锚点、自动滚动等，还有回调函数如afterLoad、onLeave等。此外，fullPage.js还支持延迟加载和创建链接到各个部分或幻灯片。

摘要由CSDN通过智能技术生成

2019独角兽企业重金招聘Python工程师标准>>>

fullPage.js

一个简单易用的，用以创建全屏滚动网站（也称为单页网站）。它允许创建全屏滚动页面，以及在页面的部分内添加一些slide。

fullpage.js全部功能在所有现代浏览器，还有一些老旧的，如Internet Explorer 8, 9，Opera 12这样的，等等。fullpage.js为浏览器提供CSS3的支持，使它成为兼容老旧浏览器的理想选择。此外它还为手机、平板电脑和触摸屏电脑提供触摸支持。

Usage （使用方法）

（你的页面文件中）需要包括：

jQuery库。（最低1.6.0）
JavaScript文件jquery.fullPage.js（或其最小化版本jquery.fullPage.min.js）
的css文件 jquery.fullPage.css

Optionally, when using css3:false, you can add the jQuery UI library in case you want to use other easing effects apart from the ones included in the jQuery library (linear and swing ) or the one included by default in fullPage.js (easeInOutCubic).

可选地，当使用时css3:false，您可以添加jQuery UI库，以防您想要使用除jQuery库（linear和swing）中包含的其他缓动效果或默认情况下在fullPage.js（easeInOutCubic）中包含的其他效果）。

Install using bower or npm

Optionally, you can install fullPage.js with bower or npm if you prefer:

Terminal:
// With bower
bower install fullpage.js

// With npm
npm install fullpage.js

Including files:

<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- This following line is optional.
 Only necessary if you use the option css3:false and you want to use 
other easing effects rather than "linear", "swing" or "easeInOutCubic". 
以下行是可选的。只有使用选项css3：false并且要使用其他缓动效果而不是“线性”，
“swing”或“easeInOutCubic”时才需要-->
<script src="vendors/jquery.easings.min.js"></script>


<!-- This following line is only necessary in the case of using 
the option `scrollOverflow:true` 以下行仅在使用选项“scrollOverflow：true的 情况下必须的，不然会报错-->
<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>

<script type="text/javascript" src="jquery.fullPage.js"></script>

Optional use of CDN

If you prefer to use a CDN to load the needed files, fullPage.js is in CDNJS: https://cdnjs.com/libraries/fullPage.js

Required HTML structure（必须的HTML 结构）

每个单独的，要被展示的部分要用 class='seciton' 包裹。默认情况下，第一个class='seciton' 的div是第一个被展示的。

class='seciton' 部分应该放在<div id="fullpage">下,不能是<body>。

<div id="fullpage">
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
</div>

如果你想定义一个不同的起始点，而不是第一个class='seciton' 的div是第一个被展示，只需将class='active' 类添加到该部分，再次载入页面。

<div class="section active">Some section</div>

为了在一个class='seciton' 内创建一个可以左右滑动的slide，每个class='seciton' 在默认情况下都会定义一个包含slide的class：

<div class="section">
	<div class="slide"> Slide 1 </div>
	<div class="slide"> Slide 2 </div>
	<div class="slide"> Slide 3 </div>
	<div class="slide"> Slide 4 </div>
</div>

这可以在HTML中看到一个完整的HTML结构示例，不过需要手动的配置必要文件。demoPage.html

Initialization（初始化）

将调用 fullPage.js 放在 $(document).ready 里面

$(document).ready(function() {
	$('#fullpage').fullpage();
});
//或者
$(function(){
    $('#fullpage').fullpage();
})

所有选项集的更复杂的初始化可能如下所示：

$(document).ready(function() {
	$('#fullpage').fullpage({
		//Navigation 导航
		menu: '#menu',//导航ID
		lockAnchors: false,
		anchors:['firstPage', 'secondPage'],//锚点
		navigation: false,//导航
		navigationPosition: 'right',//导航点定位
		navigationTooltips: ['firstSlide', 'secondSlide'],//鼠标悬停时导航点的描述
		showActiveTooltip: false,//是否固定显示导航点描述
		slidesNavigation: false,//slide 导航
		slidesNavPosition: 'bottom',

		//Scrolling 滚动
		css3: true,
		scrollingSpeed: 700,
		autoScrolling: true,
		fitToSection: true,
		fitToSectionDelay: 1000,
		scrollBar: false,
		easing: 'easeInOutCubic',
		easingcss3: 'ease',
		loopBottom: false,
		loopTop: false,
		loopHorizontal: true,
		continuousVertical: false,
		continuousHorizontal: false,
		scrollHorizontally: false,
		interlockedSlides: false,
		dragAndMove: false,
		offsetSections: false,
		resetSliders: false,
		fadingEffect: false,
		normalScrollElements: '#element1, .element2',
		scrollOverflow: false,
		scrollOverflowReset: false,
		scrollOverflowOptions: null,
		touchSensitivity: 15,
		normalScrollElementTouchThreshold: 5,
		bigSectionsDestination: null,

		//Accessibility
		keyboardScrolling: true,
		animateAnchor: true,
		recordHistory: true,

		//Design
		controlArrows: true,
		verticalCentered: true,
		sectionsColor : ['#ccc', '#fff'],
		paddingTop: '3em',
		paddingBottom: '10px',
		fixedElements: '#header, .footer',
		responsiveWidth: 0,
		responsiveHeight: 0,
		responsiveSlides: false,
		parallax: false,
		parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},

		//Custom selectors
		sectionSelector: '.section',
		slideSelector: '.slide',

		lazyLoading: true,

		//events
		onLeave: function(index, nextIndex, direction){},
		afterLoad: function(anchorLink, index){},
		afterRender: function(){},
		afterResize: function(){},
		afterResponsive: function(isResponsive){},
		afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
		onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
	});
});

Creating links to sections or slides （创建链接）

如果您正在使用带有锚链接的部分的 fullPage.js （使用每个部分中的anchors选项或自定义属性data-anchor），那么您将能够使用锚点链接直接导航到部分内的某个幻灯片。

This would be an example of a link with an anchor: http://alvarotrigo.com/fullPage/#secondPage/2 (在URL #secondPage/2定义了section 锚点(#secondPage)和slide 锚点(2)。)(which is the URL you will see once you access to that section/slide manually) Notice the last part of the URL ends in #secondPage/2.

这将是与锚的链接的示例：http : //alvarotrigo.com/fullPage/#secondPage/2（这是您手动访问该部分/幻灯片后将看到的URL࿰