使用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 相关文章推荐
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 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
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
基于node实现websocket协议
2016/04/25 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
python uuid模块使用实例
2015/04/08 Python
简单讲解Python中的闭包
2015/08/11 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
某同学的自我鉴定范文
2013/12/26 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
2015大学生求职信范文
2015/03/20 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
推销搭讪开场白
2015/05/28 职场文书
监守自盗观后感
2015/06/10 职场文书