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


Posted in Javascript onOctober 21, 2016

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

主要功能有:

支持鼠标滚动

支持前进后退和键盘控制

多个会调函数

支持手机、平板触摸事件

支持CSS3动画

支持窗口缩放

窗口缩放时自动调整

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

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

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

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

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

<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/> 
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> 
<script src="js/jquery.fullPage.js" type="text/javascript" charset="utf-8"></script>

HTML脚本

<ul id="fullpageMenu"><!--ul导航栏按钮data-menuanchor为加载的页面page--> 
      <li data-menuanchor = "page1" class="active"><a href="#page1">section1</a></li> 
      <li data-menuanchor = "page2"><a href="#page2">section2</a></li> 
      <li data-menuanchor = "page3"><a href="#page3">section3</a></li> 
      <li data-menuanchor = "page4"><a href="#page4">section4</a></li> 
    </ul> 
    <div id="fullpage"><!--div为容器,这里要用id名为fullpage--> 
      <div class="section"><!--默认的上下滚动页面,类名可改sectionSelector:".section",不改默认类名要为section--> 
        <h1>这是第一屏</h1> 
      </div> 
      <div class="section"> 
        <div class="slide">幻灯片1</div><!--默认的左右滚动幻灯片,类名可改slideSelector:".slide",不改默认类名要为slide--> 
        <div class="slide">幻灯片2</div> 
        <div class="slide">幻灯片3</div> 
        <div class="slide">幻灯片4</div> 
      </div> 
      <div class="section"> 
        <h1>这是第三屏</h1> 
      </div> 
      <div class="section"> 
        <h1>这是第四屏</h1> 
      </div> 
    </div>

CSS布局

<style type="text/css"> 
    *{ 
      margin: 0; 
      padding: 0; 
    } 
      .slide{ 
        font-size: 60px; 
        text-align: center; 
      } 
      #fullpageMenu{ 
        font-size: 30px; 
        position: fixed; 
        top: 0; 
        z-index: 1; 
        list-style: none; 
      } 
      #fullpageMenu li a{ 
        text-decoration: none; 
      } 
      #fullpageMenu li{ 
        background-color: mediumaquamarine; 
        border: 1px solid black; 
        padding: 8px; 
        cursor: pointer; 
        text-align: center; 
      } 
      #fullpageMenu li:hover{ 
        background-color: orange; 
      } 
    </style>

jQuery脚本(主要用fullPage.js对页面进行参数配置)

<script type="text/javascript"> 
  $(document).ready(function(){ 
    //配置项 
    $("#fullpage").fullpage({ 
      //可以为每一个section设置background-color属性 
      sectionsColor:["green","orange","gray","red"], 
       
      //定义是否通过箭头来控制slide幻灯片,默认为true。当我们设置为false,则幻灯片左右两则的箭头就会消失,在移动设备上,我们可以通过滑动来操作幻灯片 
      controlArrows:true, 
       
      //每一页的内容是否垂直居中,默认为true.一般保持默认值 
      verticalCentered:true, 
       
      //滚动速度,单位为毫秒,默认为700 
      scrollingSpeed:1000, 
       
      //定义锚连接,默认为[]。有了锚链接,用户就可以快速打开定位到某一页面 
      //注意定义锚链接的时候,值不要和页面中任意的id或name相同,尤其是在IE浏览器下。而且定义时不需要要加# 
      anchors:["page1","page2","page3","page4"], 
       
      //是否锁定锚链接,默认为false。如果设置为true,那么定义的锚链接,也就是anchors属性则没有效果。这个配置项使用的比较少 
      lockAnchors:false, 
       
      //定义页面section滚动的动画方式,如果修改此项,需要引入jquery.easings插件,或者jquery ui 
      easing:"easeInOutCubic", 
       
      //是否使用CSS3 transforms 来实现滚动效果,默认为true。这个配置项可以提高支持css3的浏览器,比如移动设备等的速度,如果浏览器不支持css3,则会使用jquery来替代css3实现滚动效果 
      css3:true, 
       
      //滚动到最顶部后是否连续滚动到底部,默认为false 
      loopTop:false, 
       
      //滚动到最底部是否连续滚动回顶部,默认为false 
      loopBottom:false, 
       
      //横向slider幻灯片是否循环滚动,默认为true 
      loopHorizontal:true, 
       
      //是否使用插件的滚动方式,默认为true,如果选择false,则会出现浏览器自带的滚动条,将不会按页滚动,而是按照滚动条的默认行为来滚动 
      autoScrolling:true, 
       
      //是否包含滚动条,默认为false,如果设置为true,则浏览器自带的滚动条出现,页面滚动时还是按页滚动,但是滚动条的默认行为也有效 
      scrollBar:false, 
       
      //设置每一个section顶部和底部的padding,默认为0,一般如果需要设置一个固定顶部或者底部的菜单、导航、元素等,可以使用这两个配置项 
      paddingTop:0, 
      paddingBottom:0, 
       
      //固定的元素,默认为null,需要配置一个jquery选择器。在页面滚动的时候,fixedElements设置的元素固定不动 
      fixedElements:"", 
       
      //是否可以使用键盘方向键导航,默认为true 
      keyboardScrolling:true, 
       
      //在移动设备中滑动页面的敏感性,默认为5,是按百分比来衡量,最高为100,越大则越难滑动 
      touchSensitivity:5, 
       
      //是否循环滚动,默认为false。如果设置为true,则页面会循环滚动,而不像loopTop或loopBottom那样出现跳动,注意这个属性和这两者不兼容,请不要同时使用 
      continuousVertical:false, 
       
      //锚链接是否可以控制滚动动画,默认为true。如果设置为false,则通过锚链接定位到某个页面显示不再有动画效果 
      animateAnchor:true, 
       
      //是否记录历史,默认为true,可以记录页面滚动的历史,通过浏览器的前进后退来导航。注意如果设置了autoScrolling:false,那么这个配置也将被关闭,即设置为false 
      recordHistory:true, 
       
      //绑定菜单,设定的相关属性与anchors的值对应后,菜单可以控制滚动,默认为false。可以设置为菜单的jquery选择器 
      menu:false, 
       
      //是否显示导航,默认为false。如果设置为true,会显示小圆点,作为导航 
      navigation:true, 
       
      //导航小圆点的位置,可以设置为left或者right 
      navigationPosition:"right", 
       
      //导航小圆点的tooltips设置,默认为[],注意按照顺序设置 
      navigationTooltips:["page1","page2","page3","page4"], 
       
      //是否显示当前页面的导航的tooltip信息,默认为false 
      showActiveTooltip:true, 
       
      //是否显示横向幻灯片的导航,默认为false 
      slidesNavigation:true, 
       
      //横向幻灯片导航的位置,默认为bottom,可以设置为top或bottom 
      slidesNavPosition:"top", 
       
      //内容超过满屏后是否显示滚动条,默认为false。如果设置为true,则会显示滚动条,如果滚动查看内容,还需要jquery.slimscroll插件的配合 
      scrollOverflow:false, 
       
      //section的选择器,默认为.section 
      sectionSelector:".section", 
       
      //slideSelector:slide的选择器,默认为.slide 
      slideSelector:".slide", 
    }); 
  }) 
</script>

还有一些fullPage里的方法函数(可调用,这里我没调用)

//方法函数 
        $.fn.fullpage.xxx()//调用方法 
        $.fn.fullpage.moveSectionUp();//向上滚动一页 
        $.fn.fullpage.moveSectionDown();//向下滚动一页 
        $.fn.fullpage.moveTo(section,slide);//滚动到第几页,第几个幻灯片,注意,页面是从1开始,而幻灯片是从0开始 
        $.fn.fullpage.silentMoveTo(section,slide);//滚动到第几页,第几个幻灯片和moveTo一样,但是没有动画效果 
        $.fn.fullpage.moveSlideRight();//幻灯片向右滚动 
        $.fn.fullpage.moveSlideLeft();//幻灯片向左滚动 
        $.fn.fullpage.setAutoScrolling(Boolean);//动态设置autoScrolling 
        $.fn.fullpage.setLockAnchors(Boolean);//动态设置lockAnchors 
        $.fn.fullpage.setRecordHistory(Boolean);//动态设置recordHistory 
        $.fn.fullpage.setScrollingSpeed(milliseconds);//动态设置scrollingSpeed 
        $.fn.fullpage.destroy(type);//销毁fullpage特效,type可以不写,或者使用all,不写type,fullpage给页面添加的样式和html元素还在如果使用all,则样式、html等全部销毁,页面恢复和不使用fullpage相同的效果 
        $.fn.fullpage.reBuild();//重新更新页面和尺寸,用于通过ajax请求后改变了页面结构之后,重建效果

演示效果:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
js中this用法实例详解
May 05 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
express express-session的使用小结
Dec 12 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
你准备好迎接vue3.0了吗
Apr 28 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
connection reset by peer问题总结及解决方案
Oct 21 #Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 #Javascript
js制作支付倒计时页面
Oct 21 #Javascript
浅谈javascript中的三种弹窗
Oct 21 #Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 #Javascript
AngularJS 与百度地图的结合实例
Oct 20 #Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 #Javascript
You might like
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
php如何获取Http请求
2020/04/30 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
python简单文本处理的方法
2015/07/10 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
python爬取代理ip的示例
2020/12/18 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
员工自我鉴定范文
2013/10/06 职场文书
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
党校培训自我鉴定
2014/02/01 职场文书
财务担保书范文
2014/04/02 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
Redis全局ID生成器的实现
2022/06/05 Redis