fullpage.js使用指南

近期的网站改版，需要采用全屏滑动的方式布局。于是就使用了fullpage插件。

因为fullpage是基于jquery，所以需要首先引入jquery，然后再引入fullpage.js。

$('#fullpage').fullpage({//调用fullpage元素使用其方法设置参数

　menu: '#menu', //网站导航菜单

anchors：['page1', 'page2', 'page3'],//为每屏板块命名的锚链接

navigation: true,//是否显示导航按钮

scrollingSpeed:900,//屏幕滚动花费的时间毫秒

fixedElements:'.header',//固定class为header的元素这里为栏目菜单

afterLoad：function(anchorLink,index){ //进入当前板块的函数 anchorLink为锚链接 index为索引值从1开始

if(index==1){

$('#fp-nav ul li a span,.fp-slidesNav ul li a span').css('background-color','#fff');//把导航按钮背景色改成白色

}

onLeave:function(index,nextIndex,direction){//滚动前的函数 //index为索引值 nextIndex为将要滑到到板块的索引值 direction 判断是往上滚动还是往下值是up或down

if(nextIndex==4){ //如果要滑到第四屏板块

　 $('.Service-wrap').addClass('animated');//为class为service-wrap的元素添加class animated
　 }else{
　　 $('.Service-wrap').removeClass('animated');

}

})

html结构方面需要注意的是：如果底部不需要完整的一屏显示添加class fp-auto-height 就可以。//底部高度自定义

转载于:https://www.cnblogs.com/xts6/p/9825101.html

fullpage.js使用指南相关推荐

《Node.js开发指南》书评汇总
刚查了下库存,发现订阅<Node.js开发指南>的读者大增,这是为什么呢?看了下近期本书在豆瓣的评论,口碑很好,现将豆瓣的书评汇总如下: ------------------------- ...
使用Nodejs创建基本的网站 Microblog--《Node.js开发指南》 1
使用Web框架 -- Express express -g 全局安装 express express_examplename install dependencies: $ cd express_e ...
《JS权威指南学习总结--1.1语言核心》
1.1语言核心 --本节主要介绍<js权威指南>基础部分各章讲解内容和一些简单的示例本小节内容: 一.第二章讲解js注释.分号和Unicode,第三章主要讲解js变量和赋值简单示例: ...
小弟的新书《Ext JS权威指南》终于出版了
链接:http://product.china-pub.com/3661375&weibo#ml <ext js权威指南> 前言第1章 ext js 4开发入门 / 1 1.1 ...
拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
《JS权威指南学习总结--开始简介》
本书共分成了四大部分: 1.JS语言核心 2.客户端JS 3.JS核心参考 4.客户端JS核心参考其中 <JS权威指南学习总结--1.1语法核心> 是:第一部分JS语言核心各章节重点 ...
nodec mysql_Node.js 连接 MySQL 并进行数据库操作 –node.js 开发指南
Node.js是一套用来编写高性能网络服务器的JavaScript工具包通常在NodeJS开发中我们经常涉及到操作数据库,尤其是 MySQL ,作为应用最为广泛的开源数据库则成为我们的首选,本篇就来 ...
转【FullPage.js 应用参数参考与简单调用】
简介如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站 ...
d3.js 入门指南 - 仪表盘
D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...
d3.js 入门指南
说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...

fullpage.js使用指南

fullpage.js使用指南相关推荐

最新文章

热门文章