0.01 基本演示 的HTML 布局 以及js 代码
//需要连接 连接的三个文件 <link href="https://www.jb51.net/css/jquery.fullPage.css"> //css文件 <script src="https://www.jb51.net/js/jquery-1.8.3.min.js"></script> //jQuery 1.8.3的版本 <script src="https://www.jb51.net/js/jquery.fullPage.min.js"></script> //fullPage插件的压缩版本 <style> .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} //可以改动 设置的是网页中的文字 <无关紧要> </style> <script> $(function(){ $('#dowebok').fullpage({ //fullpage 比较重要 设置的是插件的基本设置 后面的 sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'] //sectionsColor 当没有背景图片的时候这个就是设置背景颜色的否则就是空白 数组的形式 中间以逗号隔开 颜色不管是十六进制还是英文单词都需要用单引号包着 }); }); </script> <div> //绑定的大盒子 设置滚动的盒子 <div> <h3>第一屏</h3> <p>fullPage.js — 基本演示</p> </div> <div> //滚动的第二屏幕 如果在里面添加div和slide的样式就可以增加横向 点击 <div><h3>第二屏的第一屏</h3></div> <div><h3>第二屏的第二屏</h3></div> <div><h3>第二屏的第三屏</h3></div> </div> <div> <h3>第三屏</h3> </div> <div> <h3>第四屏</h3> <p>这是最后一屏</p> </div> </div>
0.02 插入背景图片演示 的HTML 布局 以及js 代码 <需要链接的文件都是一样的>
<style> //需要注意的是这里 没有设置颜色 而是在css中设置的背景图片0 .section1 { background: url(images/1.jpg) 50%;} .section2 { background: url(images/2.jpg) 50%;} .section3 { background: url(images/3.jpg) 50%;} .section4 { background: url(images/4.jpg) 50%;} </style> <script> $(function(){ $('#dowebok').fullpage(); //找到大盒子 设置fullpage全屏滚动 }); </script> <div> <div></div> <div></div> <div></div> <div></div> </div>
0.03 循环演示 html 布局以及js代码 <需要链接的文件都是一样的>
<script> $(function(){ $('#dowebok').fullpage({ sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], //和上面一样 sectionsColor 是设置每一屏的颜色 必须用逗号隔开 单引号包着 continuousVertical: false, //设置是否滑到底层再往下滚动是第一张图 设置true是执行此操作 设置false是不执行 默认不执行 不执行就不设置 }); }); </script> <div> <div> <h3>第一屏</h3> <p>fullPage.js — 循环演示</p> </div> <div> <h3>第二屏</h3> </div> <div> <h3>第三屏</h3> </div> <div> <h3>第四屏</h3> <p>这是最后一屏了，继续往下滚返回第一屏</p> </div> </div>
0.04 回调函数演示
<title>fullPage.js — 回调函数演示</title> <link href="https://www.jb51.net/css/jquery.fullPage.css"> <style> .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} .section2 p { position: relative; left: -120%;} .section3 p { position: relative; bottom: -120%;} .section4 p { display: none;} </style> <script src="https://www.jb51.net/js/jquery.min.js"></script> <script src="https://www.jb51.net/js/jquery-ui.js"></script> <script src="https://www.jb51.net/js/jquery.fullPage.js"></script> <script> $(function(){ $('#dowebok').fullpage({ sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], //设置背景颜色 afterLoad: function(anchorLink, index){ //滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算 if(index == 2){ $('.section2').find('p').delay(500).animate({ //find('p') 搜索所有段落中的后代 p 元素 //delay(500)其中参数为延时值，它的单位是毫秒 //animate() 方法执行 CSS 属性集的自定义动画 left: '0' }, 1500, 'easeOutExpo'); //jQuery Easing 动画效果扩展 } if(index == 3){ $('.section3').find('p').delay(500).animate({ bottom: '0' }, 1500, 'easeOutExpo'); } if(index == 4){ $('.section4').find('p').fadeIn(2000); //fadeIn() 方法逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果） } }, onLeave: function(index, direction){ //滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算； //nextIndex 是滚动到的“页面”的序号，从1开始计算； //direction 判断往上滚动还是往下滚动，值是 up 或 down。 if(index == '2'){ $('.section2').find('p').delay(500).animate({ left: '-120%' }, 1500, 'easeOutExpo'); } if(index == '3'){ $('.section3').find('p').delay(500).animate({ bottom: '-120%' }, 1500, 'easeOutExpo'); } if(index == '4'){ $('.section4').find('p').fadeOut(2000); //fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果） } }, continuousVertical: false, // 是否循环滚动，与 loopTop 及 loopBottom 不兼容 }); }); </script> <div> <div> <h3>第一屏</h3> <p>fullPage.js — 回调函数演示</p> </div> <div> <h3>第二屏</h3> <p>滚动到第二屏后的回调函数执行的效果</p> </div> <div> <h3>第三屏</h3> <p>滚动到第三屏后的回调函数执行的效果</p> </div> <div> <h3>第四屏</h3> <p>滚动到第四屏后的回调函数执行的效果</p> </div> </div>
0.05 绑定菜单方法