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