全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

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

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

今天我给大家介绍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插件快速开发整屏翻页的页面,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


# fullpage  # 翻页页面  # 翻页  # 使用vue制作FullPage页面滚动效果  # fullPage.js和CSS3实现全屏滚动效果  # 基于vue的fullpage.js单页滚动插件  # 原生js实现类似fullpage的单页/全屏滚动  # jQuery插件fullPage.js实现全屏滚动效果  # 全屏滚动插件fullPage.js使用实例解析  # fullpage.js全屏滚动插件使用实例  # Fullpage.js固定导航栏-实现定位导航栏  # 基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage  # 第一张  # 滚动条  # 我给  # 小编  # 这一  # 是有  # 在此  # 这就是  # 也能  # 每页  # 很高  # 同学们  # 给大家  # 只需要  # 在一  # 第一页  # 所述  # 给我留言  # 直接进入 


相关文章: 广州顶尖建站服务:企业官网建设与SEO优化一体化方案  如何用景安虚拟主机手机版绑定域名建站?  免费公司网站制作软件,如何申请免费主页空间做自己的网站?  网站制作价目表怎么做,珍爱网婚介费用多少?  建站主机选虚拟主机还是云服务器更好?  公众号网站制作网页,微信公众号怎么制作?  c# 在高并发下使用反射发射(Reflection.Emit)的性能  高防服务器租用指南:配置选择与快速部署攻略  制作证书网站有哪些,全国城建培训中心证书查询官网?  深圳网站制作的公司有哪些,dido官方网站?  如何在阿里云虚拟主机上快速搭建个人网站?  如何选择可靠的免备案建站服务器?  三星网站视频制作教程下载,三星w23网页如何全屏?  手机怎么制作网站教程步骤,手机怎么做自己的网页链接?  如何选择网络建站服务器?高效建站必看指南  网站制作大概要多少钱一个,做一个平台网站大概多少钱?  浅谈Javascript中的Label语句  制作电商网页,电商供应链怎么做?  一键制作网站软件下载安装,一键自动采集网页文档制作步骤?  想学网站制作怎么学,建立一个网站要花费多少?  宝塔Windows建站如何避免显示默认IIS页面?  如何用PHP快速搭建CMS系统?  深圳 网站制作,深圳招聘网站哪个比较好一点啊?  如何在宝塔面板中修改默认建站目录?  如何快速重置建站主机并恢复默认配置?  如何通过.red域名打造高辨识度品牌网站?  寿县云建站:智能SEO优化与多行业模板快速上线指南  ,在苏州找工作,上哪个网站比较好?  网站按钮制作软件,如何实现网页中按钮的自动点击?  建站之星如何开启自定义404页面避免用户流失?  微信小程序制作网站有哪些,微信小程序需要做网站吗?  如何在Ubuntu系统下快速搭建WordPress个人网站?  如何构建满足综合性能需求的优质建站方案?  家庭建站与云服务器建站,如何选择更优?  利用JavaScript实现拖拽改变元素大小  上海制作企业网站有哪些,上海有哪些网站可以让企业免费发布招聘信息?  临沂网站制作企业,临沂第三中学官方网站?  交易网站制作流程,我想开通一个网站,注册一个交易网址,需要那些手续?  C#如何序列化对象为XML XmlSerializer用法  招贴海报怎么做,什么是海报招贴?  西安专业网站制作公司有哪些,陕西省建行官方网站?  宁波免费建站如何选择可靠模板与平台?  制作网站的基本流程,设计网站的软件是什么?  如何在阿里云服务器自主搭建网站?  官网建站费用明细查询_企业建站套餐价格及收费标准指南  如何高效利用200m空间完成建站?  高性能网站服务器配置指南:安全稳定与高效建站核心方案  教学论文网站制作软件有哪些,写论文用什么软件 ?  山东网站制作公司有哪些,山东大源集团官网?  重庆网站制作公司哪家好,重庆中考招生办官方网站? 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。