fullpagejs配置属性小结

简介

如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 手机 的介绍页面,QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。

fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:
支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

兼容性

jQuery 兼容

兼容 jQuery 1.7+。

浏览器兼容

image

demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>fullPage.js - Pure Javascript version</title>
<meta name="author" content="Alvaro Trigo Lopez"/>
<meta name="description" content="fullPage plugin by Alvaro Trigo. Pure javascript version of full screen slider."/>
<meta name="keywords"
content="fullpage,jquery,alvaro,trigo,plugin,fullscren,screen,full,iphone5,apple,pure,javascript,slider,hijacking"/>
<meta name="Resource-type" content="Document"/>
<link rel="stylesheet" type="text/css" href="css/javascript.fullPage.css"/>

<style>
/*Reset CSS*/
/*Custom CSS*/
</style>
</head>
<body>
<div id="fullpage">
<div class="section section1">
<h1>第一页</h1>
</div>
<div class="section section2">
<div class="slide"><h1>slide1</h1></div>
<div class="slide"><h1>slide2</h1></div>
<div class="slide"><h1>slide3</h1></div>
<div class="slide"><h1>slide4</h1></div>
</div>
<div class="section section3">
<h1>第三页</h1>
</div>
<div class="section section4">
<h1>第四页</h1>
</div>
<div class="section section5">
<h1>第五页</h1>
</div>
</div>

<script type="text/javascript" src="js/javascript.fullPage.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
fullpage.initialize('#fullpage', {
// *** paddingTop/paddingBottom ***
// ***********
// paddingTop: '200px',
// 默认为0 , 设置一个在顶部或者底部的padding, 用于设置导航栏或者页尾信息等等
// *********

scrollOverflow: false, // 内容超过满屏是否显示滚动条, 默认false, 如要滚动查看内容, 需要 jquery.slimscoll插件的配合(模拟传统的浏览器滚动条)

sectionSelector: '.section', // section 的选择器 , 默认为 .section

slideSelector: '.slide', // slide 的选择器 , 默认为 .slide


// *********
navigation: true, // 默认为false , 如果为true, 则会显示导航小圆点

navigationPosition: 'right',

showActiveTooltip: true, // 默认为false , 是否直接显示导航tips

slidesNavigation: true,// 默认为false, slide幻灯片底部tips显示

slidesNavPosition: 'top', // 默认为bottom , slide 幻灯片tips显示位置, 上或者下

navigationTooltips: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'], // 导航提示
// **********

menu: false, // 默认为false . 绑定菜单, 设定的相关属性(ul元素)与 anchors值对应后, 菜单可以控制滚动 . 可以设置为菜单的jquery选择器

recordHistory: true, //是否记录历史 , 默认为true , 通过浏览器前进后退那个, 注意, 如果设置了autoScrolling为false , 那么这个配置将被关闭, 既设置为false.

animateAnchor: true,// 锚链接是否可以控制滚动动画 , 默认为true , 如果设置为false , 则通过链接定位到某个页面显示不再有动画效果

continuousVertival: false, // 是否循环滚动 ,默认为false , 如果设置为true ,则页面会循环滚动(不会和looptop..一样, 这个它没有跳动的动画), 不能与loopTop,loopBottom同时使用,不兼容

fixedElements: '#header', // 默认为null , 需要配置一个jquery选择器 , 在页面滚动时 , 配置的选择器元素固定不动

keyboardScrolling: true, // 默认为true , 是否可以用键盘方向键导航

touchSensitivity: 5, // 默认为5, 在移动设置中的敏感度 , 最高100 , 越高越难滑动


scrollBar: false, // 默认为false , 如果设置为true, 则会有滚动条 , 但是还是有动画效果

autoScrolling: true, //是否使用插件的滚动方式 , 默认true , 如果为false, 则会出现浏览器自带的滚动条 , 效果消失


loopTop: false, // 滚动到最顶部是否继续滚动到底部 , 默认为false

loopBottom: false, // 滚动到最底部是否继续滚动到底部 , 默认为false

loopHorizontal: true, // slide 是否循环滚动 , 默认为true


lockAnchors: false, //默认为false , 如果设置为true , 那么定义的锚链接就没效果了, 使用较少

scrollingSpeed: 800, // 滚动速度, 默认为700毫秒

resize: false, // 字体不随着窗体的缩放而缩放, 默认为false

verticalCentered: true, // 每一页的内容是否垂直居中, 默认为true

controlArrows: true, // 默认为true , 意思是让slide有左右两边的箭头, false即不显示

// sectionsColor: ['red','blue','black','pink','white'], //设置不同section的background-color

anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'], //定义锚链接
menu: '#menu',

css3: true, // 默认为true. 提高支持css3对浏览器的支持,更加流畅

easing: 'easeInOutCubic' // 默认为这个属性, 如果修改这个属性, 需要引入jquery.easings插件或者jquery ui

});

</script>

</body>
</html>
分享到