jQuery插件fullPage.js实现全屏滚动效果

本文实例为大家分享了全屏滚动插件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 ― 回调函数演示
 
 

  
第二屏
  
滚动到第二屏后的回调函数执行的效果
 
 

  
第三屏
  
滚动到第三屏后的回调函数执行的效果
 
 

  
第四屏
  
滚动到第四屏后的回调函数执行的效果
 

0.05 绑定菜单方法

 
第一屏
 
第二屏
 
第三屏
 
第四屏


 

  
第一屏
  
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中我引用的文件具体如下所示  <必须注意链接顺序 先css文件 再jQuery 1.8.3版本的 然后才是 jQuer ul 或者是 fullPage插件>  注意！ 所需链接文件可像我留言索要  也可寻找自行下载

 
//这是设置关于插件的样式 需要链接
 
// jQuery 1.8.3版本
 
 // JQuery ui 版本1.12.1 <可选>需要设置Easing参数时 必须链接 否则出错
 
// 最后是此次的正主 fullPage插件

配置

1、选项

2、方法

3、回调函数

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。