使用Fullpage插件快速开发整屏翻页的页面


Posted in Javascript onSeptember 13, 2017

我们经常看过一些整屏翻页的网站,看上去很高大上对于一些同学来说如果要原生的去开发可能还是有很大难度的。

今天我给大家介绍Fullpage插件,也能达到这一个效果。

下面我给同学们看下小米网站的这个页面:http://www.mi.com/hongmi2a/

看过页面之后就直接进入我们今天的主题吧!

1、一些必要的资源

//jquery
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
//fullpage插件
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js"></script>
//滚动条插件
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/vendors/jquery.slimscroll.min.js"></script>
//fullpage.css
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css" rel="external nofollow" >

2、页面结构

<div id="fullpage">
    <div class='section'>第一页</div>
    <div class='section'>第二页</div>
    <div class='section'>第三页</div>
    <div class='section'>第四页</div>
</div>

3、如果我们需要在一中又存在幻灯片效果,结构如下

<div class='section'>
    <div class='slide'>第一张幻灯片</div>
    <div class='slide'>第一张幻灯片</div>
    <div class='slide'>第一张幻灯片</div>
</div>

这就是我们的一个简单地页面布局就完成了,现在只需要使用插件的api结构即可

4、插件的格式和用法:

$(function(){
   $('#fullpage').fullpage({
       //API接口
   })
 })

5、部分API接口

//配置背景颜色
      sectionsColor:['red','#f04','#9b0','#d3f'], 
      //配置幻灯片切换是否显示箭头,默认true
      controlArrows:false, 
      //配置每页内容页面是否垂直居中,默认false
      verticalCentered:true,
      //配置文字是否随着窗口变化而变化,默认false
      resize:true,
      //配置页面滚动速度,默认700
      scrollingSpeed:1000,
      //配置锚链接,不应该和autoScrolling,scrollBar一起使用
      anchors:['page1','page2','page3','page4'],
      //配置锚点切换时候是否有过度动画,默认true
      animateAnchor:false,
      //锁定配置的锚链接是否显示,默认false
      lokAnchors:true,
      //配置动画由css3还是jquery来执行,默认true
      css3:true,
      //配置滚动到顶部之后是否从底部循环滚动,默认false
      loopTop:true,
      //相反从底部循环滚动,默认false
      loopBottom:true,
      //设置页面是否循环滚动与loopTop,loopBottom不兼容,默认是false
      continuousVertical:true,
      //幻灯片是否循环滚动,默认true
      loopHorizontal:false,
      //配置是否按照插件的方式来进行滚动,默认true,和锚点不应该一起使用,一般不设置或者保持默认
      autoScrolling:true,
      //滚动的时候是否包含滚动条,默认false,和锚点不应该一起使用,一般不设置或者保持默认
      scrollBar:false,
      //配置页面上下间距,默认0,如果需要设置固定顶部和顶部菜单导航配合使用
      // paddingTop:'300px',
      paddingBottom:0,
      //配置页面是否有固定的DOM
      fixedElements:'#header',
      //配置是否支持键盘方向键控制页面切换,默认true
      keyboardScrolling:true,
      //配置是否激活浏览器前进后退功能,如果页面设置了不按照插件的方式来滚动该配置也失效,默认true
      recordHistory:true,
      //配置菜单
      menu:'#fullpageMenu',
      //配置导航,位置,提示,显示当前位置
      navigation:true,
      navigation:'right',
      navigationTooltips:['page1','page2','page3','page4'],
      showActiveTooltip:true,
      //配置幻灯片是否显示导航,和位置
      slidesNavigation:true,
      slidesNavPosition:'bottom',
      //配置内容超过容器是否显示滚动条,模式true,
      scrollOverflow:true,
      //修改section和幻灯片默认CLASS
      sctionSelector:
      slideSelector:

总结

以上所述是小编给大家介绍的使用Fullpage插件快速开发整屏翻页的页面,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery的分页控件(C#)
Jan 06 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
Angular CLI 安装和使用教程
Sep 13 #Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 #Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 #Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 #Javascript
详解vue-router 路由元信息
Sep 13 #Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 #Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 #Javascript
You might like
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
asp 的 分词实现代码
2007/05/24 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
Python正则表达式匹配ip地址实例
2014/10/09 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
python实现动态创建类的方法分析
2019/06/25 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
python批量生成条形码的示例
2020/10/10 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
运动会入场词100字
2014/02/06 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
中秋节活动总结
2014/08/29 职场文书
2014年话务员工作总结
2014/11/19 职场文书
房屋所有权证明
2015/06/19 职场文书
小学生教师节广播稿
2015/08/19 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
DIY胆机必读:各国电子管评价
2022/04/06 无线电