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

(0)

相关推荐

  • fullPage.js和CSS3实现全屏滚动效果

    首先说一下fullpage,它是一个jquery的插件,用来实现鼠标向上向下滑动,就会自动切换到上一屏或者下一屏,对于要做一些高大上的效果确实是一个很好的插件.首先先展示一下基本的效果图. 总共有四屏的内容 当鼠标每次上下滑动时就会一整屏的切换. 第一屏是用一个图片,其他的三屏都是由左侧的三个图片和右侧的两个图片组成的. 这三屏左侧的图片展开方式不同,所以就更有炫酷的效果. 第二屏的三个图片是当页面显示时从下到上依次出来到正确的位置. 第三屏的三个图片是当页面显示时从左到右依次展开到正确的位置.

  • 基于vue的fullpage.js单页滚动插件

    基于vue的fullpage.js使用方法,供大家参考,具体内容如下 功能概述 可实现移动端的单页滚动效果,支持横向滚动和纵向滚动 兼容性 目前还未进行大规模兼容性测试.有bug请提问至issues 安装 npm install vue-fullpage --save commonjs import VueFullpage from 'vue-fullpage' Vue.use(VueFullpage) 或 var vueFullpage = require('vue-fullpage') Vu

  • jQuery插件fullPage.js实现全屏滚动效果

    本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示  的HTML 布局 以及js 代码 //需要连接 连接的三个文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> //css文件 <script src="js/jquery-1.8.3.min.js"></script> //jQue

  • 原生js实现类似fullpage的单页/全屏滚动

    前言 单页/全屏滚动页面越来越常见了,它多用于产品介绍.招聘等内容较少的简单页面.针对这种效果也出现了不少 jQuery 插件,本文实现的效果类似于fullpage的单屏滚动,使用原生JS实现,不依赖任何js库: css代码: html,body {height:100%;} body {margin:0px;} div {height:100%;} html代码: <div style="background:#FEE;"></div> <div sty

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

    如今我们经常能看见到全屏网站,尤其是国外玩站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.而JQuery的一款插件fullpage.js,可以实现全屏滚动,非常流行的效果,兼容性IE8+兼容性不错,能够兼容多种浏览器. 主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个会调函数 支持手机.平板触摸事件 支持CSS3动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等 准备工作(下载jquery

  • 基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage

    先给大家展示效果图如下所示: 使用方法: 首先在head区引入jquery.js,jquery-ui.js,fullPage.js以及样式文件jquery.fullPage.css <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="

  • Fullpage.js固定导航栏-实现定位导航栏

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和移动设备. 开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自动定位到这一页的标签 2.当然点击标签时,也是滚动到那一页而不是直接跳转的. 一.准备工

  • fullpage.js全屏滚动插件使用实例

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件,很多网站现在都使用了其来实现较好的浏览体验.  可以实现的功能: •支持前进后退和键盘控制  •多个回调函数  •支持手机.平板触摸事件  •支持 CSS3 动画  •支持窗口缩放  •窗口缩放时自动调整  •可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等 二.插件下载 np

  • 使用vue制作FullPage页面滚动效果

    前言 已经有好久没有更新博客了,大三下了要准备找实习了,才发现自己很多东西都不会,所以赶紧找了个现在流行的MVVM框架学习一下.我学习的是Vue,所以拿Vue写了一个FullPage的模板,可以供自己和其他人使用. 项目的地址是:https://github.com/hzxszsk/vue-fullpage 项目讲解 为了加深理解,我把我制作这个FullPage页面的思路和流程记录下来,也可以给其他和我一样的初学者一个参考. 分解思路 首先,我根据Vue的组件开发思想,把这个FullPage页面

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

    我们经常看过一些整屏翻页的网站,看上去很高大上对于一些同学来说如果要原生的去开发可能还是有很大难度的. 今天我给大家介绍Fullpage插件,也能达到这一个效果. 下面我给同学们看下小米网站的这个页面:http://www.mi.com/hongmi2a/ 看过页面之后就直接进入我们今天的主题吧! 1.一些必要的资源 //jquery <script type="text/javascript" src="https://cdnjs.cloudflare.com/aja

  • php微信公众号开发之翻页查询

    本文为大家分享了php微信公众号开发之翻页查询的具体代码,供大家参考,具体内容如下 注意:公众号列表最多只能列出8列,超出会报错 分页原理 limit 开始位置 , 条数 (当前页数 - 1) x 每页条数 , 每页条数 limit ($Page - 1) * $PageSize , $PageSize 0 为开始位置 mysql_num_rows 条数 require() 与 require_once() 开始加载,错误停止 include() 与 include_once() 使用加载,错误

  • Android实现阅读APP平移翻页效果

    自己做的一个APP需要用到翻页阅读,网上看过立体翻页效果,不过bug太多了还不兼容.看了一下多看阅读翻页是采用平移翻页的,于是就仿写了一个平移翻页的控件.效果如下: 在翻页时页面右边缘绘制了阴影,效果还不错.要实现这种平移翻页控件并不难,只需要定义一个布局管理页面就可以了.具体实现上有以下难点: 1.循环翻页,页面的重复利用. 2.在翻页时过滤掉多点触碰. 3.采用setAdapter的方式设置页面布局和数据. 下面就来一一解决这几个难点.首先看循环翻页问题,怎么样能采用较少的页面实现这种翻页呢

  • MongoDB快速翻页的方法

    翻阅数据是MongoDB最常见的操作之一.一个典型的场景是需要在你的用户界面中显示你的结果.如果你是批量处理的数据,同样重要的是要让你的分页策略正确,以便你的数据处理可以规模化. 接下来,让我们通过一个例子来看在MongoDB中翻阅数据的不同方式.在这个例子中,我们有一个CRM数据库的用户数据,我们需要通过翻阅浏览和在同一时间显示10个用户.所以实际上,我们的页面大小是10.下方是我们的用户文档的结构: { _id, name, company, state } 方法一:Using skip()

  • JQuery插件iScroll实现下拉刷新,滚动翻页特效

    JQuery插件:iScroll 页面布局: <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> <

  • 使用jQuery.fn自定义jQuery翻页插件

    第一次写jQuery插件.自己感觉写的也不怎么样.写jQuery插件利用的就是这个东东 jQuery.fn,例如 复制代码 代码如下: jQuery.fn.pluginName=function(){}; 这个是我写的分页插件的样子 插件通过一个外放的函数来进行翻页操作,无论是点击前进.后退.还是改变页面大小,都会调用该函数. 先看看插件的代码结构 复制代码 代码如下: (function ($) { //存放插件所需的属性字段 var PagerFields = { }; //插件的私有函数

  • react.js 翻页插件实例代码

    废话不多说了,下面给大家分享react.js翻页插件的代码,具体代码如下所示: var Page = React.createClass({ render:function() { //中间代码更新 var totalRows = this.props.totalRows; var listRows = this.props.listRows; var nowPage = this.props.nowPage>0?this.props.nowPage:1; var firstRow = this

  • Android程序开发ListView+Json+异步网络图片加载+滚动翻页的例子(图片能缓存,图片不错乱)

    例子中用于解析Json的Gson请自己Google下载 主Activity: package COM.Example.Main; import java.util.HashMap; import java.util.Iterator; import java.util.LinkedList; import java.util.List; import java.util.Map; import COM.Example.Main.R; import COM.Example.Main.stringG

  • Android开发之手势检测及通过手势实现翻页功能的方法

    本文实例讲述了Android开发之手势检测及通过手势实现翻页功能的方法.分享给大家供大家参考,具体如下: 手势是指用户手指或触摸笔在触摸屏上的连续触碰的行为,比如在屏幕上从左至右划出的一个动作,就是手势,再比如在屏幕上画出一个圆圈也是手势.手势这种连续的触碰会形成某个方向上的移动趋势,也会形成一个不规则的几何图形.Android对两种手势行为都提供了支持: 1. 对于第一种手势行为而言,Android提供了手势检测,并为手势检测提供了相应的监听器. 2. 对于第二种手势行为,Android允许开

  • MybatisX 快速开发插件过程详解

    目录 简介 基础功能 1.xml跳转 2.代码生成 3.JPA提示和生成语句 简介 MybatisX 是一款基于 IDEA 的快速开发插件,方便在使用mybatis以及mybatis-plus开始时简化繁琐的重复操作,提高开发速率. 注:idea得用最新的版本才能生效一些功能,我用的是2020.3版本的 基础功能 1.xml跳转 添加插件后在dao层会多一只戴红色头巾的小鸟,同样在对应xml文件方法前也会对应一直戴蓝色头巾的小鸟,点击即可在dao和xml文件之间跳转 2.代码生成 在开发中在到中

随机推荐