全屏滚动插件fullPage.js使用实例解析

如今我们经常能看见到全屏网站，尤其是国外玩站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。而JQuery的一款插件fullpage.js，可以实现全屏滚动，非常流行的效果，兼容性IE8兼容性不错，能够兼容多种浏览器。

主要功能有：

支持鼠标滚动

支持前进后退和键盘控制

多个会调函数

支持手机、平板触摸事件

支持CSS3动画

支持窗口缩放

窗口缩放时自动调整

可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

准备工作（下载jquery.fullPage.js和jquery.fullPage.css插件)

网址：插件下载地址(https://github.com/alvarotrigo/fullPage.js)

代码的外联式引用（包括jquery-2.1.0.js)一共3个

链接rel='样式表type=' text/CSS ' href=' CSS/jquery。整页。CSS '/script src=' http : js/jquery-2。1 .0 .js ' type=' text/JAVAScript ' charset=' utf-8 '/script script src=' http : js/jquery。整页。js ' type=' text/JavaScript ' charset=' utf-8 '/脚本HTML脚本

ul id='fullpageMenu '！保险商实验所导航栏按钮数据-梅努安乔为加载的页面page - li数据-menuanchor='第1页' class=' active ' a href=' #第1页'第1节/a/Li数据-menuanchor='第2页' a href=' #第2页'第2节/a/Li数据-menuanchor='第3页' a href=' #第3页'第3节/a/Li数据-menuanchor='第4页' a href=' #第4页'第4节/a/Li/ul div id='整页'！- div为容器，这里要用编号名为fullpage - div class='section '！-默认的上下滚动页面，类名可改截面选择器：'。部分，不改默认类名要为截面- h1这是第一屏/h1/div class=' section ' div class=' slide '幻灯片1/div！-默认的左右滚动幻灯片，类名可改幻灯片选择器： ' .幻灯片，不改默认类名要为slide - div class='slide '幻灯片2/div div class='幻灯片'幻灯片3/div分类='幻灯片'幻灯片4/div/div类='截面' h1这是第三屏/h1 /div div class='section' h1这是第四屏/h1 /div /div CSS布局

样式类型=' text/CSS ' * { margin : 0；padd : 0；} .幻灯片{ font-size : 60px文本对齐：中心；} # FullPageMenu { font-size : 30px；位置：固定；top : 0；z-index : 1；列表样式：无；} #完整页面菜单阿利{ text-摆设：无；} # FullPageMenu Li {底色： mediumaquamarineborder: 1px纯黑；padding: 8pxcursor:指针；文本对齐：中心；} # FullPageMenu Li :悬停{底色：橙色；} /style jQuery脚本（主要用fullPage.js对页面进行参数配置)

脚本类型=' text/JavaScript' $(文档)。ready(function(){//配置项$('#fullpage '))。fullpage({ //您可以为每个部分设置sectionscolor : ['绿色'，'橙色'，'灰色'，'红色']的背景色属性，//定义是否通过箭头控制幻灯片，默认值为true。当我们将其设置为false时，幻灯片上的左右箭头将消失。在移动设备上，我们可以滑动来操作滑动控制箭头：//每页内容是否垂直居中默认为真。通常，默认值为垂直输入3360真。//滚动速度以毫秒为单位，默认值为700滚动速度33601000。//定义通过锚点链接，用户可以快速打开并定位某个页面。//定义锚点链接时，该值不应与页面中的任何id或名称相同，尤其是在IE浏览器下。此外，定义时不需要添加# anchors 3360['第1页'，'第2页'，'第3页'，'第4页']。//是否锁定锚点链接默认为假。如果设置为true，则定义的锚点链接(即锚点属性)不起作用。此配置项使用较少的锁锚： false。//定义页面部分滚动的动画模式。如果修改此项，需要引入jquery.easings插件或jQuery ui easing3360 ' easeinoutcubic '。//是否使用CSS3变换实现滚动效果默认为真。这个配置项可以提高支持css3的浏览器的速度，比如移动设备等。如果浏览器不支持css3，将使用jquery代替css3实现CSS3:True的滚动效果。//滚动到顶部后是否继续向下滚动默认为false loopp:False。//滚动到底部后是否继续滚动回顶部。默认值为false循环底部： false。//默认值为true水平循环： true。//是否使用插件滚动模式，默认值为true。如果选择false，浏览器自己的滚动条将出现，并且不会逐页滚动。相反，根据滚动条的默认行为滚动：自动滚动3360 true。//如果包含滚动条，默认值为false。如果设置为true，将显示浏览器自己的滚动条，滚动时页面仍会逐页滚动，但滚动条的默认行为也是有效的：scrollBar:false。//在每个部分的顶部和底部设置填充，默认为0。一般来说，如果需要设置固定的顶部或底部菜单、导航、元素等。您可以使用这两个配置项填充顶部：0和填充底部33600。//固定元素默认为空，需要配置jquery选择器。当页面滚动时，固定元素设置的元素固定在固定元素3360 ' '。//是否可以使用键盘方向键导航，默认值为True键盘滚动3360 True。//移动设备中滑动页面的敏感度默认为5，用百分比来衡量，最高值为100。越大越难滑触敏33605。//.如果设置为真，页面将循环滚动，而不是像loopTop或loopBottom那样跳转。请注意，此属性与两者都不兼容。请不要同时使用连续垂直：假。//锚点链接是否可以控制滚动动画默认为真。如果设置为false，则通过锚点链接定位页面，并显示不再有动画效果。//是否记录历史，默认值为真，可以记录页面滚动的历史，并通过浏览器的向前和向后导航。请注意，如果设置了自动滚动：false，该配置也将关闭，即设置为false记录历史： true。//绑定菜单。设置的相关属性对应锚点的值后，菜单可以控制滚动，默认值为false。

它可以设置为菜单的jquery选择器菜单u: false。//是否显示导航默认设置为假。如果设置为true，点将显示为导航： true。//导航点的位置可以设置为左或右导航位置： '右'。//导航点的工具提示默认设置为[]。注意按顺序设置navigation tooltip 3360[' page 1 '，' page2 '，' page3 '，' page4']。//是否显示当前页面导航的工具提示信息，默认值为false showactivetooltipits 3360 true，//是否显示水平幻灯片的导航，默认值为false幻灯片导航： true。//水平滑动导航的位置默认为底部，可以设置为顶部或底部滑动导航位置： '顶部'。//默认值为假。如果设置为真，将显示滚动条。如果滚动查看内容，需要jquery.slimscroll插件的选择器，scrolloverflow :为false。//节，也就是。部分部分选择器3360’。默认情况下为“section”。///幻灯片选择器：幻灯片的幻灯片选择器，默认为。slideslideselector 3360 '。滑动。});}) /script在fullPage中也有一些方法函数(可调用，我这里没有调用)

//方法函数$.fn.fullpage.xxx()//调用方法$ . fn . full page . move action up()；//向上滚动一页$ . fn . full page . moveactiondown()；//向下滚动一页$ .fn.fullpage .移动到(部分，幻灯片)；//滚动到页面和幻灯片，注意页面从1开始，而幻灯片从0开始$ . fn . full page . silent move to(section，slide)；//滚动到哪个页面，哪个幻灯片和moveTo一样，但是没有动画效果$ . fn . full page . move slide right()；//向右滚动幻灯片$ . fn . full page . moveslide left()；//将幻灯片向左滚动$ .fn.fullpage.setautoscrolling(布尔值)；//动态设置自动滚动$ .fn.fullpage.setlockanchors(布尔值)；//动态设置lock anchors $ . fn . full page . setrecordhistory(布尔值)；//动态设置record history $ . fn . full page . setscrollingsspeed(毫秒)；//设置scrollingspeed $。fn.fullpage.destroy(类型)动态；//破坏整版特效。不能写入类型，或者使用all代替type。fullpage添加的样式和html元素仍然存在。如果全部使用，则所有样式和html都将被销毁，页面将恢复与没有fullpage $.fn.fullpage.reBuild()时相同的效果；//再次更新页面和大小，用于ajax请求后改变页面结构后重建效果。

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