【注意】所有的page要用div包裹，id为fullpage.不能直接包在body中

【使用fullpage的步骤】

　1、导入 JQuery.js,fullpage.js,fullpage.css  <!-- fullPage.js 必须在 JQuery.js 之后导入，否则无效 -->

   2、组建网页布局，最外层 id=fullpage 单页class=section 幻灯片 class="slide"

   3、JS中使用$(“#fullpage").fullpage();调用执行

【代码如下】

《css样式部分》

<style type="text/css">
.section1{
background-color: yellowgreen;
}
.section2{
background-color: deepskyblue;
}
.section3{
background-color: tomato;
}
.section4{
background-color: cadetblue;
}

#menu{
position: fixed;/*生成绝对定位的元素，相对于浏览器窗口进行定位*/
left: 20px;
top: 10px;
z-index: 999;/*不被覆盖，显示在最外层*/
padding: 0px;
}

#menu li{
float: left;
list-style: none;
width: 80px;
height: 25px;
line-height: 25px;
margin: 0px 5px;
text-align: center;
background-color: #BCBCBC;
border-radius: 7px;
}

#menu li a{
text-decoration: none;
color: white;
}
</style>

《body部分》

<body>
<ul id="menu">
<!--data-menuanchor是设置要选中的栏目-->
<li data-menuanchor="page1"><a href="#page1">page1</a></li>
<li data-menuanchor="page2"><a href="#page2">page2</a></li>
<li data-menuanchor="page3"><a href="#page3">page3</a></li>
<li data-menuanchor="page4"><a href="#page4">page4</a></li>
</ul>

<!--所有page要用div包裹，id为fullpage。不能直接包在body中-->
<div id="fullpage" >
<!-- 所有的单页，class为section -->
<div class="section section1">page1</div>
<div class="section section2">
<div class="slide">page2-1</div>
<div class="slide">page2-2</div>
<div class="slide">page2-3</div>
</div>
<div class="section section3">page3</div>
<div class="section section4">page4</div>
</div>

</body>

《js部分》

<script type="text/javascript">

$(function(){/*文档准备函数*/
/*添加完单页后，需调用.fullpage()方法，才能生效*/
$("#fullpage").fullpage({

anchors: ['page1', 'page2', 'page3', 'page4'],

menu:"#menu",

navigation:true,

});

用fullPage来实现全屏滚动效果的更多相关文章

  1. 手机端实现fullPage——全屏滚动效果

    封装了一个小插件模拟fullPage的全屏滚动效果,比较简单. 特点: 1.  纯js实现,小巧轻便. 2.  兼容性好.苹果.安卓都没问题,暂时没遇到问题机型. 缺点: 1.  仅封装了基础功能,H ...

  2. 六一广告页H5全屏滚动效果实现

    明天就六一儿童了(放假了),在这里提前祝大家周末快乐,每逢节假日公司必然会推出h5活动页的需求,这次六一儿童节也不例外,产品这次倒是没提什么互动效果需求,只不过根据UI妹子给的设计图,图片与图片中颜色 ...

  3. 全屏滚动效果H5FullscreenPage.js

    前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...

  4. pagePiling.js - 创建漂亮的全屏滚动效果

    全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...

  5. pagePiling.js - 创建美丽的全屏滚动效果

    在线演示 在线演示 本地下载 全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主 ...

  6. fullpage.js jq全屏滚动插件

    fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下 ...

  7. FullPage.js – 轻松实现全屏滚动（单页网站）效果

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...

  8. scrollify - 滚动条方式的全屏滚动

    jQuery Scrollify Version Beta v1.0.5 Date:2017-04-25 23:45 源代码 (function($, window, document) { 'use ...

  9. 全屏滚动插件pagePiling.js

    全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...

随机推荐

  1. ARM 编译工具keil 和 IAR 命令行编译和下载

    目的 不管是Keil还是IAR对代码补全,高亮等编辑功能支持的不是很好,虽然现在的Keil 5.25对界面的支持好了很多,但是很多人还是青睐于第三方的编辑器,命令行的编译方式可以让我们在使用第三方编辑 ...

  2. VS2017按F1使用中文帮助

    VS2017使用时,按F1出来在线英文帮助,可以稍作改动,出来中文帮助. 1.进入安装文件,选择单个组件,勾选Help Viewer. 2.安装完成后,在IDE中选择在线查看器中启动.

  3. SQLServer 2014 AlwaysOn

    一.安装故障转移群集的准备 确保群集中的节点都已加入到域(本例中为2节点) 确保将域帐户添加到本机管理员组 二.安装故障转移群集(所有节点都需要安装该功能) 1)单击任务栏”服务器管理器”,打开服务器 ...

  4. ASP.NET中数据绑定表达式

    今天谈下.NET中的数据绑定表达式.数据绑定表达式必须包含在<%#和%>字符之间.格式如下: <tagprefix:tagname property='<%# data-bin ...

  5. WPF MVVM 网易云音乐

    前言: 写的不多. 随时会更新吧 涉及到的技术有很多 绑定 集合 命令 MVVM 自定义控件 事件 用户控件 附加属性 依赖属性 动画 Style Tmepate 装饰器 转换器 ********** ...

  6. 简单版nginx lua 完成定向流量分发策略

    本文链接:https://www.cnblogs.com/zhenghongxin/p/9131362.html 公司业务前端是使用 “分发层+应用层” 双层nginx架构,目的是为了提高缓存的命中率 ...

  7. 四，php异常处理

    1,异常处理 异常处理用于在指定的异常或错误发生时,改变脚本的正常执行流程. <?php try{ //错误或异常 }catch (Exception $ex){ //处理异常 //抛出异常 } ...

  8. Flask从入门到精通之链接的使用

    在Web开发中,任何具有多个路由的程序都需要可以连接不同页面的链接,例如导航条. 在模板中直接编写简单路由的URL 链接不难,但对于包含可变部分的动态路由,在模板中构建正确的URL 就很困难.而且,直 ...

  9. Concurrent包工具类使用

    一.读写锁 传统的同步锁就是独占式锁,当线程使用资源时候保持独占,无论读写.当人们发现请求队列(假设)中相邻请求为读-读的时候,阻塞是一种浪费资源的操作.比如公告板,所有路过的人(请求)都是读操作,并 ...

  10. 使用图片预加载，解决断网后无法从后台获取提示网络异常的logo图片的问题

    项目中有需求,断网后,显示小提示窗,里面包含网络异常提示语和异常小logo图片. 在实际操作时,遇到,断网后,无法从后台获取异常小logo图片. 我是才用图片预加载的方法解决这个问题的,解决方法如下: ...