fullpage和move.js制作全屏和视差效果的两大帮手

这是一个美丽的年代，一个个技术大牛帮我们制作一个又一个好用又实惠的js插件，手写css3和js代码固然可以实现那些绚丽的效果，但是一旦页面扩展，重新加入一些新的效果时，如果你的代码复用性差，肯定会造成代码冗余，学会使用这些插件，一旦页面需要改动，插件差不多涵盖你想要实现的效果的大部分api,想用的时候直接使用即可，站在大牛的肩膀上，做个幸福的码农。

jQuery全屏滚动插件FullPage.js中文帮助文档API

简介

fullPage.js是一个基于jQuery的全屏滚动插件，它能够很方便、很轻松的制作出全屏网站。

fullpage开源中文文档

主要功能

支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机、平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等 兼容性

fullPage.js 支持 IE8+ 及其他现代浏览器。

使用方法

1、引入文件

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

<script src="js/jquery.min.js"></script>

<script src="js/jquery-ui.min.js"></script>

<script src="js/jquery.fullPage.js"></script> 2、HTML

<div id="fullpage"> <div class="section">第一屏</div> <div class="section">第二屏</div> <div class="section"> <div class="slide">第三屏的第一屏</div> <div class="slide">第三屏的第二屏</div> <div class="slide">第三屏的第三屏</div> <div class="slide">第三屏的第四屏</div> </div> <div class="section">第四屏</div> </div> 3、JavaScript

$(function(){ $('#fullpage').fullpage({ 'verticalCentered': false, 'css3': true, 'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'], anchors: ['page1', 'page2', 'page3', 'page4'], 'navigation': true, 'navigationPosition': 'right', 'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'] }) }) 经测试，最好至少有 anchors 这个参数，否则在火狐浏览器中，第一次滚动会直接滚到底部。

点击这里查看上面代码的示例：http://www.uedsc.com/wp-content/uploads/2015/02/fullpage-demo/

配置

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个参数 

举例如下：

/*定义幻灯片箭头，默认true*/
//controlArrows:false,
/*定义字体是否随页面缩放而缩放,默认false*/
//resize:true,
/*定义内容是否垂直居中,默认true*/
//verticalCentered:false,
/*鼠标滚动耗时，单位毫秒，默认700*/
//scrollingSpeed:2000,
/*为section添加锚点，注意，锚点不能和页面中任意的id或name相同，快速打开定位到某一页面*/
anchors:['page1','page2','page3','page4','page5'],
/*是否锁定锚链接，默认false,不锁定，很少用这个*/
//lockAnchors:true,
//easing:,
css3:true,
//loopTop:true,
//loopBottom:true,
//loopHorizontal:true,
/*是否使用插件方式滚动，默认true，设置false时出现滚动条,不按页滚动，按滚动条滚动*/
//autoScrolling:false,
/*是否包含滚动条，默认false,设置为true出现浏览器自带的滚动条，滚动还是按页滚动，但是滚动条也有用*/
//scrollBar:true,
/*设置每一个section顶部和底部的padding值，
* 一般我们需要设置一个固定头部或底部导航，菜单
* ，元素等时，使用这个配置项*/
//paddingTop:'50px',
//paddingBottom:'50px',
/*设置固定的元素，页面滚动时，该元素固定不动*/
fixedElements:'#header',
/*是否支持键盘方向键操作：上下左右键，默认true支持。*/
//keyboardScrolling:true,
/*移动页面中滑动页面的敏感性，默认为5，按百分比计算，最高为100*/
//touchSensitivity:5,
/*是否循环滚动，默认false.和loop类属性不兼容，一般不建议使用*/
//continuousVertical:true,
/*锚链接是否可以控制滚动动画，默认true，设置为false,则通过锚点链接定位到某一个页面没有动画效果*/
//animateAnchor:true,
menu:'#menu',
/*设置小圆点导航*/
//navigation:true,
/*默认小圆点导航位置right*/
//navigationPosition:'left',
/*鼠标移动到小圆点时提示，显示的pageId*/
//navigationTooltips:['page1','page2','page3','page4','page5'],
/*显示当前页面tool提示,显示页面pageId，默认false不显示*/
//showActiveTooltip:true,
/*是否显示横向幻灯片的导航,默认false*/
//slidesNavigation:true,
/*横向幻灯片的位置，默认bottom，可选top或bottom*/
//slidesNavPosition:'bottom',