本文实例为大家分享了全屏滚动插件fullpage.js的具体使用方法，供大家参考，具体内容如下
0.01 基本演示 的HTML 布局 以及js 代码
//需要连接 连接的三个文件 //css文件 //jQuery 1.8.3的版本 //fullPage插件的压缩版本//绑定的大盒子 设置滚动的盒子第一屏
fullPage.js — 基本演示
//滚动的第二屏幕 如果在里面添加div和slide的样式就可以增加横向 点击第三屏
第四屏
这是最后一屏
0.02 插入背景图片演示 的HTML 布局 以及js 代码
0.03 循环演示 html 布局以及js代码
第一屏
fullPage.js — 循环演示
第二屏
第三屏
第四屏
这是最后一屏了，继续往下滚返回第一屏
0.04 回调函数演示
fullPage.js — 回调函数演示 第一屏
fullPage.js — 回调函数演示
第二屏
滚动到第二屏后的回调函数执行的效果
第三屏
滚动到第三屏后的回调函数执行的效果
第四屏
滚动到第四屏后的回调函数执行的效果
0.05 绑定菜单方法
fullPage.js — 绑定菜单演示_dowebok
第一屏
fullPage.js — 绑定菜单演示
第二屏
请查看左上角，点击可以控制
第三屏
绑定的菜单没有默认的样式，你需要自行编写
第四屏
这是最后一屏
0.06 项目导航演示
第一屏
fullPage.js — 项目导航演示
第二屏
请查看右边的圆圈
第三屏
圆圈还可以设置位置，颜色，加上 tip，点击可以控制
第四屏
这是最后一屏
0.07 自动循环滚动
第一屏
第二屏
第三屏
第四屏
0.08 设置横屏的自动播放
0.09 判断当前浏览器的宽度 小于多少的时候关闭滚动
根据可视区域大小启用/关闭全屏滚动效果
如果可视区宽度小于1024，则关闭全屏滚动效果，使用自带的滚动条
请试着调整浏览器大小并查看滚动条是否出现
第四屏
fullPage.js 是 jQuery 的一个插件，主要功能是制作出全屏网站 fullPage插件的兼容性是兼容IE7浏览器往上 其余主流浏览器就不描叙了 fullpage插件支持以下操作
1、插件可以使用鼠标滑轮进行滚动
2、当竖屏的时候支持键盘的上下箭头滚动 横屏对照可以使用的是左右箭头
3、能使用 多个回调函数 制作出动画效果 但是需要涉及到jQuery ui的插件连接
4、fullPage 同样也是 支持 触摸事件 如可触摸式笔记本 平板 手机
5、能在属性操作时 使用css3动画 但是要注意 css3的兼容性
6、能够自适应 屏幕的大小
7、可以设置页面的滚动宽度 以及背景颜色 是否循环播放 可以时候回调函数 文本可以设置样式
使用 fullPage中我引用的文件具体如下所示 注意！ 所需链接文件可像我留言索要 也可寻找自行下载
//这是设置关于插件的样式 需要链接 // jQuery 1.8.3版本 // JQuery ui 版本1.12.1 <可选>需要设置Easing参数时 必须链接 否则出错 // 最后是此次的正主 fullPage插件
配置
1、选项
2、方法
3、回调函数
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。
更多jQuery插件fullPage.js实现全屏滚动效果相关文章请关注PHP中文网！
