JavaScript--fullPage.js插件

GitHub:https://github.com/alvarotrigo/fullPage.js

FullPage.js是一个基于JQuery的插件,可以很方便的制作出全屏网站;

一 特点:

1.支持鼠标滚动;
2.支持键盘控制前进和后退;
3.多个回调函数;
4.支持手机/平板触摸事件;
5.支持CSS3动画;
6.支持窗口缩放,缩放时自动调整;
7.jQuery兼容1.7+;IE8+;

二 引入文件

1.引入FullPage.css

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

2.引入jquery.js

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

3.引入easings.js增强动画过渡效果,也可以使用完整的jQuery UI代替;

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

4.引入FullPage.js

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

三 HTML结构

 <!-- 每个section代表一屏,默认显示第一屏;如果要指定加载页面时显示的屏幕,可在对应的section加上class="active" -->
 <div id="wrapper">
     <div class="section">第一屏</div>
     <div class="section">第二屏</div>
     <div class="section">第三屏</div>
 </div>

 <!-- 可在section内加入slide; -->
 <div class="section">
     <div class="slide">第一屏的第一屏</div>
     <div class="slide">第一屏的第二屏</div>
     <div class="slide">第一屏的第三屏</div>
 </div>

四 JavaScript调用

 <script>
     $(function(){
         $('#wrapper').fullpage();
     });
 </script>

五 配置

 $(document).ready(function() {
     $('#fullpage').fullpage({
         //Navigation
         menu: false,                            // 绑定菜单,设置的相关属性与anchors的值对应后,菜单可以控制滚动;
         anchors:['firstPage', 'secondPage'],    // 定义锚链接;
         navigation: false,                      // 是否显示项目导航;
         navigationPosition: 'right',            // 项目导航的位置;
         navigationTooltips: ['firstSlide', 'secondSlide'],  // 项目导航的tip;
         showActiveTooltips: false,
         slidesNavigation: true,                 // 是否显示左右滑动的项目导航;
         slidesNavPosition: 'bottom',            // 左右滑动的项目导航的位置;

         //Scrolling
         css3: true,                             // 是否使用CSS3-transforms滚动;
         scrollingSpeed: 700,                    // 滚动速度;
         autoScrolling: true,                    // 是否使用插件的滚动方式,选择false会出现滚动条;
         fitToSection: true,
         scrollBar: false,
         easing: 'easeInOutCubic',               // 滚动动画方式;
         easingcss3: 'ease',
         loopBottom: false,                      // 滚动到最底部是否滚回顶部;
         loopTop: false,                         // 滚动到最顶部是否滚回底部;
         loopHorizontal: true,                   // 左右滑块是否循环;
         continuousVertical: false,              // 是否循环滚动;
         normalScrollElements: '#element1, .element2',
         scrollOverflow: false,                  // 内容超过满屏后是否显示滚动条;
         touchSensitivity: 15,
         normalScrollElementTouchThreshold: 5,

         //Accessibility
         keyboardScrolling: true,                // 是否使用键盘方向键导航;
         animateAnchor: true,                    // 锚点控制滚动;
         recordHistory: true,                    // 记录历史;

         //Design
         controlArrows: true,                    // 左右滑块箭头;
         verticalCentered: true,                 // 内容是否垂直居中;
         resize : false,                         // 字体是否随窗口缩放而缩放;
         sectionsColor : ['#ccc', '#fff'],
         paddingTop: '3em',                      // 与顶部距离;
         paddingBottom: '10px',
         fixedElements: '#header, .footer',      // 定位某个元素;
         responsive: 0,

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

         //events
         onLeave: function(index, nextIndex, direction){},   // 滚动前的回调函数;
         afterLoad: function(anchorLink, index){},           // 滚动到某一屏后的回调函数;
         afterRender: function(){},                          // 页面结构生成后的回调函数;
         afterResize: function(){},
         afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, // 滚动到某一水平滑块后的回调函数;
         onSlideLeave: function(anchorLink, index, slideIndex, direction){}      // 某一水平滑块滚动前的回调函数;
     });
 });