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

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

2.引入jquery.js

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

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

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

4.引入FullPage.js

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

 

三 HTML结构

 1 <!-- 每个section代表一屏,默认显示第一屏;如果要指定加载页面时显示的屏幕,可在对应的section加上class="active" -->
 2 <div id="wrapper">
 3     <div class="section">第一屏</div>
 4     <div class="section">第二屏</div>
 5     <div class="section">第三屏</div>
 6 </div>
 7 
 8 <!-- 可在section内加入slide; -->
 9 <div class="section">
10     <div class="slide">第一屏的第一屏</div>
11     <div class="slide">第一屏的第二屏</div>
12     <div class="slide">第一屏的第三屏</div>
13 </div>

 

 四 JavaScript调用

1 <script>
2  $(function(){ 3  $('#wrapper').fullpage(); 4  }); 5 </script>

 

五 配置

 1 $(document).ready(function() {  2     $('#fullpage').fullpage({  3         //Navigation
 4         menu: false,                            // 绑定菜单,设置的相关属性与anchors的值对应后,菜单可以控制滚动;
 5         anchors:['firstPage', 'secondPage'],    // 定义锚链接;
 6         navigation: false,                      // 是否显示项目导航;
 7         navigationPosition: 'right',            // 项目导航的位置;
 8         navigationTooltips: ['firstSlide', 'secondSlide'],  // 项目导航的tip;
 9         showActiveTooltips: false, 10         slidesNavigation: true,                 // 是否显示左右滑动的项目导航;
11         slidesNavPosition: 'bottom',            // 左右滑动的项目导航的位置;
12 
13         //Scrolling
14         css3: true,                             // 是否使用CSS3-transforms滚动;
15         scrollingSpeed: 700,                    // 滚动速度;
16         autoScrolling: true,                    // 是否使用插件的滚动方式,选择false会出现滚动条;
17         fitToSection: true, 18         scrollBar: false, 19         easing: 'easeInOutCubic',               // 滚动动画方式;
20         easingcss3: 'ease', 21         loopBottom: false,                      // 滚动到最底部是否滚回顶部;
22         loopTop: false,                         // 滚动到最顶部是否滚回底部;
23         loopHorizontal: true,                   // 左右滑块是否循环;
24         continuousVertical: false,              // 是否循环滚动;
25         normalScrollElements: '#element1, .element2', 26         scrollOverflow: false,                  // 内容超过满屏后是否显示滚动条;
27         touchSensitivity: 15, 28         normalScrollElementTouchThreshold: 5, 29 
30         //Accessibility
31         keyboardScrolling: true,                // 是否使用键盘方向键导航;
32         animateAnchor: true,                    // 锚点控制滚动;
33         recordHistory: true,                    // 记录历史;
34 
35         //Design
36         controlArrows: true,                    // 左右滑块箭头;
37         verticalCentered: true,                 // 内容是否垂直居中;
38         resize : false,                         // 字体是否随窗口缩放而缩放;
39         sectionsColor : ['#ccc', '#fff'], 40         paddingTop: '3em',                      // 与顶部距离;
41         paddingBottom: '10px', 42         fixedElements: '#header, .footer',      // 定位某个元素;
43         responsive: 0, 44 
45         //Custom selectors
46         sectionSelector: '.section', 47         slideSelector: '.slide', 48 
49         //events
50         onLeave: function(index, nextIndex, direction){},   // 滚动前的回调函数;
51         afterLoad: function(anchorLink, index){},           // 滚动到某一屏后的回调函数;
52         afterRender: function(){},                          // 页面结构生成后的回调函数;
53         afterResize: function(){}, 54         afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, // 滚动到某一水平滑块后的回调函数;
55         onSlideLeave: function(anchorLink, index, slideIndex, direction){}      // 某一水平滑块滚动前的回调函数;
56  }); 57 });