作者：killer | 来源：互联网 | 2022-03-25 20:39
本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法，供大家参考，具体内容如下
0.01 基本演示 的HTML 布局 以及js 代码
//需要连接 连接的三个文件
//css文件
//jQuery 1.8.3的版本
//fullPage插件的压缩版本
//绑定的大盒子 设置滚动的盒子
//滚动的第二屏幕 如果在里面添加div和slide的样式就可以增加横向 点击
第二屏的第一屏
第二屏的第二屏
第二屏的第三屏
第三屏
0.02 插入背景图片演示 的HTML 布局 以及js 代码 <需要链接的文件都是一样的>
0.03 循环演示 html 布局以及js代码 <需要链接的文件都是一样的>
0.04 回调函数演示
0.05 绑定菜单方法
0.06 项目导航演示
第三屏
圆圈还可以设置位置，颜色，加上 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中我引用的文件具体如下所示 <必须注意链接顺序 先css文件 再jQuery 1.8.3版本的 然后才是 jQuer ul 或者是 fullPage插件> 注意！ 所需链接文件可像我留言索要 也可寻找自行下载
//这是设置关于插件的样式 需要链接
// jQuery 1.8.3版本
// JQuery ui 版本1.12.1 <可选>需要设置Easing参数时 必须链接 否则出错
// 最后是此次的正主 fullPage插件
配置
1、选项
2、方法
3、回调函数
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
京公网安备 11010802041100号