本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法，供大家参考，具体内容如下
0.01 基本演示 的HTML 布局 以及js 代码
//需要连接 连接的三个文件 //css文件 //jQuery 1.8.3的版本 //fullPage插件的压缩版本.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} //可以改动 设置的是网页中的文字 <无关紧要> //绑定的大盒子 设置滚动的盒子 第一屏 fullPage.js — 基本演示
//滚动的第二屏幕 如果在里面添加div和slide的样式就可以增加横向 点击 第二屏的第一屏 第二屏的第二屏 第二屏的第三屏 第三屏 第四屏这是最后一屏
0.02 插入背景图片演示 的HTML 布局 以及js 代码 <需要链接的文件都是一样的>
//需要注意的是这里 没有设置颜色 而是在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%;}
0.03 循环演示 html 布局以及js代码 <需要链接的文件都是一样的>
第一屏fullPage.js — 循环演示
第二屏 第三屏 第四屏这是最后一屏了，继续往下滚返回第一屏
0.04 回调函数演示
fullPage.js — 回调函数演示 .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;} 第一屏 fullPage.js — 回调函数演示
第二屏滚动到第二屏后的回调函数执行的效果
第三屏滚动到第三屏后的回调函数执行的效果
第四屏滚动到第四屏后的回调函数执行的效果
0.05 绑定菜单方法
fullPage.js — 绑定菜单演示_dowebok #menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;} #menu li { float: left; margin: 0 10px 0 0; font-size: 14px;} #menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;} #menu .active a { color: #fff; background-color: #333;} .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} 第一屏 fullPage.js — 绑定菜单演示
第二屏请查看左上角，点击可以控制
第三屏绑定的菜单没有默认的样式，你需要自行编写
第四屏这是最后一屏
0.06 项目导航演示
第一屏fullPage.js — 项目导航演示
第二屏请查看右边的圆圈
第三屏圆圈还可以设置位置，颜色，加上 tip，点击可以控制
第四屏这是最后一屏
0.07 自动循环滚动
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} 第一屏 第二屏 第三屏 第四屏
0.08 设置横屏的自动播放
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} 第一屏 请滚动到第二屏查看
第二屏的第一屏 第二屏的第二屏 第二屏的第三屏 第三屏 第四屏
0.09 判断当前浏览器的宽度 小于多少的时候关闭滚动
.section { text-align: center; font: 30px "Microsoft Yahei"; color: #fff;} 根据可视区域大小启用/关闭全屏滚动效果
如果可视区宽度小于1024，则关闭全屏滚动效果，使用自带的滚动条
请试着调整浏览器大小并查看滚动条是否出现
第四屏
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插件> 注意！ 所需链接文件可像我留言索要 也可寻找自行下载
//这是设置关于插件的样式 需要链接 // jQuery 1.8.3版本 // JQuery ui 版本1.12.1 <可选>需要设置Easing参数时 必须链接 否则出错 // 最后是此次的正主 fullPage插件
配置
1、选项
2、方法
3、回调函数
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
