在本文中，我们分享全屏滚动插件fullPage.js的具体用法，供大家参考。具体内容如下

0.01基本演示的HTML布局和js代码

//需要连接的三个文件linkrel='样式表' href=' CSS/jQuery . full page . CSS '//CSS文件script src=' http : js/jQuery-1 . 8 . 3 . min . js '/script//jQuery 1 . 8 . 3脚本的版本src=' http : js/jQuery . full page . min . js '/script//full page插件样式的压缩版本. section { text-align 3360 center；font: 50px '微软雅黑'；color: # fff}//可以更改的设置是网页中的文字无关紧要/style script $(function(){ $(' # dowebok ')。FullPage ({//FullPage)更重要的设置是sectionscorol 3360[' # 1 BBC 9 b '，' # 4bbfc3 '后面的插件基本设置。# 7baabe '，' # f90']//SectionsColor当没有背景图片时，这是设置背景颜色；否则，它是空白数组的形式，中间用逗号分隔颜色。十六进制和英语单词都需要用单引号(})括起来；});/script Div id=' dowebok '/bound big box在折叠上方设置滚动框Div class=' section ' H3/h3pfullpage . js-basic presentation/p/Div Div class=' section '/您可以在第二个屏幕的折叠上方添加Div class=' slide ' H3/H3/Div class=' slide ' H3第二个屏幕/H3/Div class=' slide ' H3第二个屏幕的第三个屏幕/H3/Div/Div class=' section ' H3第三个屏幕/H3/Div class=' section '

Style //需要注意的是，这里没有设置颜色，只是css 0中设置的背景图片。第1节{ background : URL(images/1 . jpg)50%；} . section 2 { background : URL(images/2 . jpg)50%；} . section 3 { background : URL(images/3 . jpg)50%；} . section 4 { background : URL(images/4 . jpg)50%；}/style script $(function(){ $(' # dowebok ')。full page()；//找到大框，将fullpage设置为全屏滚动})；/script div id=' dowebok ' div class=' section 1 '/div div class=' section 2 '/div div class=' section 3 '/div div class=' section 4 '/div/div 0.03循环演示html的布局和js代码需要链接的文件是一样的

script$(function(){ $('#dowebok '))。full page({ sectionsColor :[' # 1 BBC 9 b '，' #4BBFC3 '，' #7BAABE '，' #f90 ')，//同上，sectionscorol是将每个屏幕的颜色设置为用逗号分隔并用连续的竖线：换行false。//设置是否滑动到底部再向下滚动是第一个画面设置。true是执行此操作。默认情况下不执行False。});});/script Div id=' dowebok ' Div class=' section ' H3 fold/h3 pfullpage . js-loop演示/p/Div Div class=' section ' H3第二个屏幕/H3/Div Div class=' section ' H3第三个屏幕/H3/Div class=' section ' H3第四个屏幕/h3p这是最后一个屏幕，继续向下滚动返回fold /h3 p/div/div0.04回调函数演示上方

titlefullPage.js —回调函数演示/titlelink rel='样式表href=' CSS/jquery。整页。“CSS”样式。第{ text-align :节居中；font: 50px '微软雅黑；color: # fff }第2节p { position:相对；左侧：-120%;} .第3节p {位置：相对；底部：-120%;} . section 4 p { display : none }/style script src=' http : js/jquery。量滴js '/script script src=' http : js/jquery-ui。js '/script script src=' http : js/jquery。整页。js '/script script $(function(){ $(' # dowebok ')).整页({ sectionscorol :[' # 1 BBC 9 b '，' #4BBFC3 '，' #7BAABE '，' #f90 ')，//设置背景颜色后装：函数(anchorLink，index){ //滚动到某一屏后的回调函数，接收锚链接和指数两个参数，anchorLink是锚链接的名称，索引是序号，从一开始计算if(index==2){ $(。第2节').查找(' p ').延迟(500)。动画({ //find('p ')搜索所有段落中的后代p元素//延迟(500)其中参数为延时值，它的单位是毫秒//动画()方法执行半铸钢钢性铸铁(铸造半钢)属性集的自定义动画left: '0' }，1500，' easeOutExpo ')；//jQuery宽松动画效果扩展} if(index==3){ $(。第3节').查找(' p ').延迟(500)。animate({ bottom: '0' }，1500，' easeOutExpo ')；} if(index==4){ $(。第4节').查找(' p ').法丁(2000年);//fadeIn()方法逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果)} }，onLeave:函数（索引，方向){ //滚动前的回调函数，接收索引、下一个索引和方向3个参数：索引是离开的"页面"的序号，从一开始计算；//下一个索引是滚动到的"页面"的序号，从一开始计算；//方向判断往上滚动还是往下滚动，值是起来或往下。if(index==' 2 '){ $(。第2节').查找(' p ').延迟(500)。animate({ left: '-120%' }，1500，' easeOutExpo ')；} if(index==' 3 '){ $(。第3节').查找(' p ').延迟(500)。animate({ bottom: '-120%' }，1500，' easeOutExpo ')；} if(index==' 4 '){ $(。第4节').查找(' p ').淡出(2000年年);//fadeOut()方法逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果)} }，continuousVertical: false，//是否循环滚动，与loopTop及loopBottom不兼容});});/script div id=' dowe bok ' div class=' section 1 section ' H3第一屏/h3 pfullPage.js —回调函数演示/p/div class='第2节h3第二屏/h3 p滚动到第二屏后的回调函数执行的效果/p/div class='第3节h3第三屏/h3 p滚动到第三屏后的回调函数执行的效果/p/div class='第四节h3第四屏/h3 p滚动到第四屏后的回调函数执行的效果/p /div/div0.05绑定菜单方法

titlefullPage.js —绑定菜单演示_dowebok/titlelink rel='样式表type=' text/CSS ' href=' CSS/jquery。整页。“CSS”样式#菜单{边距： ^ 0；padd : 0；位置：固定；left: 10pxtop: 10px列表样式类型：无；z指数： 70;} #菜单li {左侧浮动：margin : 0 10px 0 0 font-size : 14px；} #菜单a {左侧浮动：padding: 10px 20px背景-color : # fff；颜色： # 333文本装饰：无；} #菜单。激活a { color: # fff背景色： # 333;}.第{ text-align : }节中心；font: 50px '微软雅黑；color: # fff}/style脚本src=' http : js/jquery。量滴js '/script script src=' http : js/jquery。整页。js '/script script $(function(){ $(' # dowebok ')).整页({ sectionscorol :[' # 1 BBC 9 b '，' #4BBFC3 '，' #7BAABE '，' #f90 ')，//设置颜色参数锚3360['第一页','第2页','第3页','第四页'],//定义锚链接menu: '#menu' //绑定菜单，设定的相关属性与锚的值对应后，菜单可以控制滚动});});/script ul id=' menu ' Li data-menuanchor=' page 1 ' class=' active ' a href=' # page 1 '第一屏/a/li li数据-menuanchor='第2页' a href=' #第2页'第二屏/a/li li数据-menuanchor='第3页' a href=' #第3页'第三屏/a/li li数据-menuanchor='第4页' a href=' #第4页'第四屏/a/Li/uldiv id=' dowe bok ' div=' section ' H3第一屏/h3 pfullPage.js —绑定菜单演示/p /div div class='section' h3第二屏/h3 p请查看左上角，点击可以控制/p /div div class='section' h3第三屏/h3 p绑定的菜单没有默认的样式，你需要自行编写/p /div div class='section' h3第四屏/h3 p这是最后一屏/p /div/div0.06项目导航演示

script$(function(){ $('#dowebok ')).整页({ sectionscorol :[' # 1 BBC 9 b '，' #4BBFC3 '，' #7BAABE '，' #f90 ')，//设置颜色属性导航： true，//是否显示项目导航默认值是错误的需要设置true })；});/script div id=' dowe bok ' div class=' section ' H3第一屏/h3 pfullPage.js —项目导航演示/p /div div class='section' h3第二屏/h3 p请查看右边的圆圈/p /div div class='section' h3第三屏/h3 p圆圈还可以设置位置，颜色，加上小费，点击可以控制/p /div div class='section' h3第四屏/h3 p这是最后一屏/p /div/div0.07自动循环滚动

风格。第{ text-align :节居中；font: 50px '微软雅黑；color : # fff }/style div id=' dowe bok ' div class=' section ' H3第一屏/H3/H3区第二屏/H3/H3区第三屏/H3/H3区第四屏/H3/div/div脚本$(function(){ $(' # dowebok ').整页({ sectionsColor :[' # 1 BBC 9 b '，' #4BBFC3 '，' #7BAABE '，' #f90 ')，//设置颜色属性continuousVertical: true //设置是否循环滚动，与loopTop及loopBottom不兼容默认是false })；setInterval(函数(){ //定时器三秒一执行$ .fn。整页。movesectiondown()；//向下滚动}, 3000);});/script0.08设置横屏的自动播放

风格。第{ text-align :节居中；font: 50px '微软雅黑；color : # fff }/style div id=' dowe bok ' div class=' section ' H3第一屏/h3 p请滚动到第二屏查看/p/div class=' section ' div class=' slide ' H3第二屏的第一屏/H3/H3第二屏的第二屏/H3/H3第二屏的第三屏/H3/分区/分区=H3“分区”第三屏/H3/H3区第四屏/H3/div/div脚本src=' http : js/jquery。量滴js '/script script src=' http : js/jquery。整页。js '/script script $(function(){ $(' # dowebok ')).整页({ sectionsColor :[' # 1 BBC 9 b '，' #4BBFC3 '，' #7BAABE '，' #f90 ')，//设置颜色属性loopBottom : true//loopBottom布尔值错误的滚动到最底部后是否滚回顶部});setInterval(函数(){ $ .fn。整页。movesliderright()；//moveSlideRight()幻灯片向右滚动//moveSlideLeft()幻灯片向左滚动}, 3000);});/script0.09判断当前浏览器的宽度小于多少的时候关闭滚动

link rel='样式表' type=' text/CSS ' href=' CSS/jquery . full page . CSS ' style . section { text-align : center；font: 30px '微软雅黑'；color: # fff}/style div id=' dowe bok ' div class=' section ' pEnable/根据可视区域的大小关闭全屏滚动效果/p/div div class=' section' pIf可视区域的宽度小于1024，关闭全屏滚动效果。使用它自己的滚动条/p/div class=' section ' p请尝试调整浏览器大小并查看滚动条是否出现/p/div div class=' section ' p第四个屏幕/p/div/div script $(function(){ $(' # dowebok ')。full page({ section scolor :[' # 1 BBC 9 b '，' # 4bbfc3 '，' # 7baabe '，' # f90 ']//设置颜色属性})；$(窗口)。resize(function(){ //当浏览器窗口调整大小时，会发生resize事件。resize()方法触发resize事件，或者指定当resize事件发生时要运行的函数autoScrolling()；//true是否使用插件的滚动方式，如果选择false，浏览器的滚动条会出现})；函数autoScrolling(){ var $ ww=$(window)。宽度()；if($ ww 1024){ $ . fn . full page . setautoscrolling(false)；//setAutoScrolling()设置页面滚动模式，如果设置为true，则自动滚动设置为false，不滚动} else { $ . fn . full page . setAutoScrolling(true)；} }自动滚动()；});/scriptfullPage.js是jQuery的一个插件。它的主要功能是创建一个全屏网站。fullPage插件的兼容性与IE7浏览器兼容。其他主流浏览器就不描述了。fullpage插件支持以下操作

1.使用鼠标滑轮可以滚动插件

2.当屏幕垂直时，支持键盘的上下箭头在屏幕上滚动。您可以使用左箭头和右箭头

3.您可以使用多个回调函数来创建动画效果，但是需要涉及jQuery ui的插件连接如下

4.fullPage还支持触摸事件，例如可触摸笔记本平板电脑

5.操作属性时可以使用css3动画，但要注意css3的兼容性

6.能够适应屏幕的大小

7.您可以设置页面的滚动宽度以及背景色是否循环播放。当您可以回调函数文本时，您可以设置样式

使用我在整页引用的文件，如下所示。您必须注意链接顺序，首先是css文件，然后是jquery 1 . 8 . 3版本，然后是jQuer ul或fullPage插件。所需的链接文件可以通过我的消息请求或自己下载

Linkrel='样式表'类型=' text/CSS ' href=' CSS/jquery . full page . CSS '/这是设置插件的样式，需要链接Script src=' http : js/jquery . min . js '/Script//Script src=' http : js/jquery-ui . js '/Script//jquery ui 1 . 12 . 1版。如果需要设置Easing参数，必须进行链接，否则会出现错误。script src=' http 3360 js/jquery . fullPage . js '/script//最后，这是主要的full page插件配置

1.选择

2.方法

3.回调函数

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。