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 });