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

 

转载于:https://www.cnblogs.com/yizihan/p/4560787.html

总结

以上是生活随笔为你收集整理的JavaScript--fullPage.js插件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。