GitHub:https://github.com/alvarotrigo/fullPage.js

FullPage.js是一个基于JQuery的插件,可以很方便的制作出全屏网站;

一 特点:

1.支持鼠标滚动;
2.支持键盘控制前进和后退;
3.多个回调函数;
4.支持手机/平板触摸事件;
5.支持CSS3动画;
6.支持窗口缩放,缩放时自动调整;
7.jQuery兼容1.7+;IE8+;

二 引入文件

1.引入FullPage.css

 <link rel="stylesheet" href="css/jquery.fullpage.css">

2.引入jquery.js

 <script src="js/jquery.min.js"></script>

3.引入easings.js增强动画过渡效果,也可以使用完整的jQuery UI代替;

 <script src="js/jquery.easings.min.js"></script>

4.引入FullPage.js

 <script src="js/jquery.fullpage.js"></script>

三 HTML结构

 <!-- 每个section代表一屏,默认显示第一屏;如果要指定加载页面时显示的屏幕,可在对应的section加上class="active" -->
<div id="wrapper">
<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section">第三屏</div>
</div> <!-- 可在section内加入slide; -->
<div class="section">
<div class="slide">第一屏的第一屏</div>
<div class="slide">第一屏的第二屏</div>
<div class="slide">第一屏的第三屏</div>
</div>

四 JavaScript调用

 <script>
$(function(){
$('#wrapper').fullpage();
});
</script>

五 配置

 $(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: false, // 绑定菜单,设置的相关属性与anchors的值对应后,菜单可以控制滚动;
anchors:['firstPage', 'secondPage'], // 定义锚链接;
navigation: false, // 是否显示项目导航;
navigationPosition: 'right', // 项目导航的位置;
navigationTooltips: ['firstSlide', 'secondSlide'], // 项目导航的tip;
showActiveTooltips: false,
slidesNavigation: true, // 是否显示左右滑动的项目导航;
slidesNavPosition: 'bottom', // 左右滑动的项目导航的位置; //Scrolling
css3: true, // 是否使用CSS3-transforms滚动;
scrollingSpeed: 700, // 滚动速度;
autoScrolling: true, // 是否使用插件的滚动方式,选择false会出现滚动条;
fitToSection: true,
scrollBar: false,
easing: 'easeInOutCubic', // 滚动动画方式;
easingcss3: 'ease',
loopBottom: false, // 滚动到最底部是否滚回顶部;
loopTop: false, // 滚动到最顶部是否滚回底部;
loopHorizontal: true, // 左右滑块是否循环;
continuousVertical: false, // 是否循环滚动;
normalScrollElements: '#element1, .element2',
scrollOverflow: false, // 内容超过满屏后是否显示滚动条;
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5, //Accessibility
keyboardScrolling: true, // 是否使用键盘方向键导航;
animateAnchor: true, // 锚点控制滚动;
recordHistory: true, // 记录历史; //Design
controlArrows: true, // 左右滑块箭头;
verticalCentered: true, // 内容是否垂直居中;
resize : false, // 字体是否随窗口缩放而缩放;
sectionsColor : ['#ccc', '#fff'],
paddingTop: '3em', // 与顶部距离;
paddingBottom: '10px',
fixedElements: '#header, .footer', // 定位某个元素;
responsive: 0, //Custom selectors
sectionSelector: '.section',
slideSelector: '.slide', //events
onLeave: function(index, nextIndex, direction){}, // 滚动前的回调函数;
afterLoad: function(anchorLink, index){}, // 滚动到某一屏后的回调函数;
afterRender: function(){}, // 页面结构生成后的回调函数;
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, // 滚动到某一水平滑块后的回调函数;
onSlideLeave: function(anchorLink, index, slideIndex, direction){} // 某一水平滑块滚动前的回调函数;
});
});

JavaScript--fullPage.js插件的更多相关文章

  1. 整屏滚动效果 jquery.fullPage.js插件+CSS3实现

    最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...

  2. fullPage.js插件用法(转发)

    fullPage.js主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速 ...

  3. 【干货】教你如何利用fullPage.js以及move.js插件打造高端大气的网站效果!

    前言: 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次. 在学习过jQuery插件之后,才发现之前的很多网站特效完全可 ...

  4. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  5. fullpage.js全屏滚动插件使用方法

    在移动端经常会用到全屏滚动插件,实现常见H5活动页的效果,fullpage是一个很不错的jquery全屏滚动插件 fullpage.js插件的API:http://www.dowebok.com/77 ...

  6. fullpage.js的easing参数怎样配置自定义动画

    首先看非官方文档 并没有详细的说明怎样去使用easing.js,所以我加的运动属性根本就不起作用, 再看,官方文档 Optionally, when using css3:false, you can ...

  7. fullpage.js与animate.css搭配使用

    jquery的fullpage.js插件的使用 https://alvarotrigo.com/fullPage/#3rdPage   官网 https://github.com/alvarotrig ...

  8. fullpage.js全屏滚动插件使用小结

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...

  9. FullPage.js全屏滚动插件学习总结

    如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果 ...

  10. 仿小米网jQuery全屏滚动插件fullPage.js

    演 示 下 载   简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...

随机推荐

  1. 带权单源最短路发[稠密图](Dijkstra)

    对于稠密图,采用邻接矩阵较为合适 所以我们先构建一个邻接矩阵 typedef int Vertex; typedef int WeightType; //图 typedef struct MyGrap ...

  2. Docker集群管理工具 - Kubernetes 部署记录 (运维小结)

    一.  Kubernetes 介绍 Kubernetes是一个全新的基于容器技术的分布式架构领先方案, 它是Google在2014年6月开源的一个容器集群管理系统,使用Go语言开发,Kubernete ...

  3. 剑指offer编程题Java实现——面试题14调整数组顺序使奇数位于偶数之前

    题目: 输入一个整数数组,实现一个函数来调整该数组中数组的顺序,使得所有的奇数位于数组的前半部分,偶数位于数组的后半部分. 解题思路:数组中维护两个指针,第一个指针初始化时候指向数组头部,第二个指针初 ...

  4. Python语法基础——关于全局变量与局部变量

    1.函数内部的变量名如果第一次出现,且出现在=前面,即被视为定义一个局部变量,不管全局域中有没有用到该变量名,函数中使用的将是局部变量,例如: num = 100 def func(): num =  ...

  5. LeetCode--No.015 3Sum

    15. 3Sum Total Accepted: 131800 Total Submissions: 675028 Difficulty: Medium Given an array S of n i ...

  6. rocketmq自启动配置

    捣鼓rocketmq自启动半天发现是启动脚本里没有声明java环境 现记录下 脚本 #!/bin/bash export JAVA_HOME=/opt/data/jdk1.8/jdk1.8.0_161 ...

  7. 服务器运维 -- windows系统更换System32下文件后 重启无法进入桌面

    场景描述: windows系统更换System32下文件后 重启无法进入桌面 情况1,原替换文件有备份     解决建议: 准备好该文件 情况2,原备份文件没有备份  解决建议:从相同版本的服务器上边 ...

  8. 关于一个div上下左右居中的css方法

    1:通过position:absolute定位,上下左右的值都设为0,margin:auto:需要知道div的宽高 { width: 64px; height: 64px; border: 1px s ...

  9. ubuntu 增加一个用户 并赋予权限

    一.添加一个用户 sudo adduser tommy  //添加一个tommyd的用户 sudo passwd tommy // 修改密码 回车后出现一下提示 输入密码即可Changing pass ...

  10. ACM学习<3>

    排序算法:      基本:冒泡,快速,选择,堆,插入,shell      多路并归: 1.冒泡排序:      思想:交换排序,通过相邻的交换来达到排序的目的.      流程:         ...