fullpage.js 基本配置
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了fullpage.js 基本配置相关的知识，希望对你有一定的参考价值。
1.fullpage地址 https://github.com/alvarotrigo/fullPage.js
2.fullpage基本配置
引入css文件和js文件
1 <script src="jquery.js"></script> 2 <script src="jquery.fullpage.js"></script> 3 <link rel="stylesheet" href="jquery.fullpage.css">
基本结构
1 <div id="fullpage"> 2 <div class="section">Some section</div> 3 <div class="section">Some section</div> 4 </div>
初始化fullpage
1 <script> 2 $(‘#fullpage‘).fullpage(); 3 </script>
3.fullpage原理 : 更改dom结构以及应用css动画
4.fullpage常用参数配置
1 <script type="text/javascript"> 2 $(‘#fullpage‘).fullpage({ 3 navigation :true, //圆点导航 4 navigationPosition :‘right‘, //圆点导航位置left or right 5 navigationTooltips :[‘第一屏‘,‘第二屏‘,‘第三屏‘], //圆点导航提示信息 6 showActiveTooltip :true, //圆点导航提示信息是否显示 7 sectionsColor :[‘#f00‘, ‘#f40‘, ‘#f80‘], //设置每一屏的背景色 8 anchors :[‘page1‘,‘page2‘,‘page3‘], //设置锚点 9 menu :‘#menu‘, //导航 10 verticalCentered :false, //设置元素是否垂直居中 11 paddingTop :‘100px‘, //设置每一屏内容的内边距 12 scrollingSpeed :1000, //设置切屏速度 13 }); 14 </script>
5.设置menu
menu:"#menu"
1)加结构
1 <ul id="menu"> 2 <li data-menuanchor="page1"><a href="#page1">第一页</a></li> 3 <li data-menuanchor="page2"><a href="#page2">第二页</a></li> 4 </ul>
2)加样式
6.水平轮播
1 <div class="section">第一屏</div> 2 <div class="section"> 3 <div class="slide"> Slide 1 </div> 4 <div class="slide"> Slide 2 </div> 5 <div class="slide"> Slide 3 </div> 6 <div class="slide"> Slide 4 </div> 7 </div> 8 <div class="section">第三屏</div>
7.懒加载
这个功能默认是处于打开状态的. lazyLoading: true
使用：
1 <img data-src="image.png"> 2 <video> 3 <source data-src="video.webm" type="video/webm" /> 4 <source data-src="video.mp4" type="video/mp4" /> 5 </video>
8.fullpage常用的几个方法
moveSectionUp() ： 向上翻一屏 用法： $.fn.fullpage.moveSectionUp();
moveSectionDown() ： 向下翻一屏 用法： $.fn.fullpage.moveSectionDown();
moveTo(section, slide) ： 跳到指定的某一屏的某一个轮播页 用法： $.fn.fullpage.moveTo(‘firstSlide‘, 2);
9.fullpage事件
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterResponsive: function(isResponsive){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
10.demo
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>fullpage基本使用</title> 5 <meta charset="utf-8" /> 6 <!-- 引入 jquery.js jquery.fullpage.js jquery.fullpage.css 三个文件 --> 7 <script type="text/javascript" src="jquery.js"></script> 8 <script type="text/javascript" src="jquery.fullpage.js"></script> 9 <link rel="stylesheet" type="text/css" href="jquery.fullpage.css"> 10 <style type="text/css"> 11 #menu{ 12 position: fixed; 13 height: 40px; 14 width: 100%; 15 top: 0px; 16 background-color: #fff; 17 } 18 ul,li{ 19 padding: 0; 20 margin: 0; 21 } 22 #menu li{ 23 display: inline-block; 24 margin: 0 15px; 25 } 26 #menu li.active{ 27 background-color: blue; 28 } 29 .page1 img{ 30 opacity: 0; 31 transition: opacity 5s; 32 } 33 .page1 .on1{ 34 opacity: 1; 35 } 36 </style> 37 </head> 38 <body> 39 40 <!-- fullpage基本结构 整体有一个外部容器 每一屏有一个section类 --> 41 <div id="fullpage"> 42 <div class="section page1"> 43 <img data-src="yuanxiao.jpg" /> 44 </div> 45 <!-- 懒加载(默认开启状态)设置 src改成data-src即可 --> 46 <div class="section"> <img data-src="yuanxiao.jpg" /></div> 47 <div class="section"> 48 <!-- 水平轮播 --> 49 <div class="slide">slide 1</div> 50 <div class="slide">slide 2</div> 51 <div class="slide">slide 3</div> 52 </div> 53 </div> 54 55 <!-- 导航 --> 56 <ul id="menu"> 57 <li data-menuanchor="page1"><a href="#page1">第一页</a></li> 58 <li data-menuanchor="page2"><a href="#page2">第二页</a></li> 59 <li data-menuanchor="page3"><a href="#page3">第三页</a></li> 60 </ul> 61 62 <!-- 初始化fullpage --> 63 <script type="text/javascript"> 64 $(‘#fullpage‘).fullpage({ 65 navigation :true, //圆点导航 66 navigationPosition :‘right‘, //圆点导航位置left or right 67 navigationTooltips :[‘第一屏‘,‘第二屏‘,‘第三屏‘], //圆点导航提示信息 68 showActiveTooltip :true, //圆点导航提示信息是否显示 69 sectionsColor :[‘#f00‘, ‘#f40‘, ‘#f80‘], //设置每一屏的背景色 70 anchors :[‘page1‘,‘page2‘,‘page3‘], //设置锚点 71 menu :‘#menu‘, //导航 72 verticalCentered :false, //设置元素是否垂直居中 73 paddingTop :‘100px‘, //设置每一屏内容的内边距 74 scrollingSpeed :1000, //设置切屏速度 75 onLeave : function(index, nextIndex, direction) { 76 if(index == 1) { 77 $(".page1 img").removeClass("on1"); 78 } 79 console.info("onLeave:当前:"+index+"下一屏："+nextIndex+"方向:"+direction); 80 }, 81 afterLoad : function(anchorLink, index) { 82 if(index == 1){ 83 $(".page1 img").addClass("on1"); 84 } 85 console.info("afterLoad:当前:"+index+",anchorLink："+anchorLink); 86 }, 87 88 }); 89 </script> 90 91 </body> 92 </html>
以上是关于fullpage.js 基本配置的主要内容，如果未能解决你的问题，请参考以下文章