<style> .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} </style> <div> <div> <h3>第一屏</h3> <p>请滚动到第二屏查看</p> </div> <div> <div><h3>第二屏的第一屏</h3></div> <div><h3>第二屏的第二屏</h3></div> <div><h3>第二屏的第三屏</h3></div> </div> <div> <h3>第三屏</h3> </div> <div> <h3>第四屏</h3> </div> </div> <script src="https://www.jb51.net/js/jquery.min.js"></script> <script src="https://www.jb51.net/js/jquery.fullPage.js"></script> <script> $(function(){ $('#dowebok').fullpage({ sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], //设置颜色属性 loopBottom: true //loopBottom 布尔值 false 滚动到最底部后是否滚回顶部 }); setInterval(function(){ $.fn.fullpage.moveSlideRight(); //moveSlideRight() slide 向右滚动 // moveSlideLeft() slide 向左滚动 }, 3000); }); </script>
0.09 判断当前浏览器的宽度 小于多少的时候关闭滚动
<link type="text/css" href="https://www.jb51.net/css/jquery.fullPage.css"> <style> .section { text-align: center; font: 30px "Microsoft Yahei"; color: #fff;} </style> <div> <div> <p>根据可视区域大小启用/关闭全屏滚动效果</p> </div> <div> <p>如果可视区宽度小于1024，则关闭全屏滚动效果，使用自带的滚动条</p> </div> <div> <p>请试着调整浏览器大小并查看滚动条是否出现</p> </div> <div> <p>第四屏</p> </div> </div> <script> $(function(){ $('#dowebok').fullpage({ sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'] //设置颜色属性 }); $(window).resize(function(){ //当调整浏览器窗口的大小时，发生 resize 事件。resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数 autoScrolling(); //true 是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条 }); function autoScrolling(){ var $ww = $(window).width(); if($ww < 1024){ $.fn.fullpage.setAutoScrolling(false); //setAutoScrolling() 设置页面滚动方式，设置为 true 时自动滚动 设置为false不滚动 } else { $.fn.fullpage.setAutoScrolling(true); } } autoScrolling(); }); </script>
fullPage.js 是 jQuery 的一个插件，主要功能是制作出全屏网站 fullPage插件的兼容性是兼容IE7浏览器往上 其余主流浏览器就不描叙了 fullpage插件支持以下操作
1、插件可以使用鼠标滑轮进行滚动
2、当竖屏的时候支持键盘的上下箭头滚动 横屏对照可以使用的是左右箭头
3、能使用 多个回调函数 制作出动画效果 但是需要涉及到jQuery ui的插件连接<在下面有>
4、fullPage 同样也是 支持 触摸事件 如可触摸式笔记本 平板 手机
5、能在属性操作时 使用css3动画 但是要注意 css3的兼容性
6、能够自适应 屏幕的大小
7、可以设置页面的滚动宽度 以及背景颜色 是否循环播放 可以时候回调函数 文本可以设置样式
使用 fullPage中我引用的文件具体如下所示 <必须注意链接顺序 先css文件 再jQuery 1.8.3版本的 然后才是 jQuer ul 或者是 fullPage插件> 注意！ 所需链接文件可像我留言索要 也可寻找自行下载
<link type="text/css" href="https://www.jb51.net/css/jquery.fullPage.css"> //这是设置关于插件的样式 需要链接 <script src="https://www.jb51.net/js/jquery.min.js"></script> // jQuery 1.8.3版本 <script src="https://www.jb51.net/js/jquery-ui.js"></script> // JQuery ui 版本1.12.1 <可选>需要设置Easing参数时 必须链接 否则出错 <script src="https://www.jb51.net/js/jquery.fullPage.js"></script> // 最后是此次的正主 fullPage插件
配置
1、选项
2、方法
3、回调函数
