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. Anton 上课题

    Anton 上课题 Anton likes to play chess. Also he likes to do programming. No wonder that he decided to a ...

  2. appendChild()方法遇到的问题

    在使用appendChild()方法中遇到了一个问题: 下面的代码可以正常插入多个新元素 <input type="button" value="在后面插入新元素& ...

  3. ReactNative学习笔记(四)热更新和增量更新

    概括 关于RN的热更新,网上有很多现成方案,但是一般都依赖第三方服务,我所希望的是能够自己管控所有一切,所以只能自己折腾. 热更新的思路 热更新一般都是更新JS和图片,也就是在不重新安装apk的情况下 ...

  4. 获取post请求数据工具类

    package com.ccidit.features.otherFunctions.util; import java.io.BufferedReader; import java.io.IOExc ...

  5. Adobe Photoshop CC 2019画板背景色白底如何去掉?

    Adobe Photoshop CC 2019画板背景色白底切透明图片很不方便,有两种方法可以解决: 第一种方法: 新建文档的时候直接背景内容直接选择透明 若设计师提供的设计稿是白底也没关系,就是第二 ...

  6. 前端自动化部署方案-实践(配合shell)

    以下实例项目为vue项目,其他项目当然也雷同咯 在项目中建一个这个么脚本文件 不说了,上代码 #!/bin/sh handle=$1; env=$2; # 远程部署机 webhook # 如果用远程机 ...

  7. Java 11 快要来了,编译 & 运行一个命令搞定!

    Java 11 马上要来了,原定于 9 月发布,还有不到 3 个月了,敬请期待更多新功能被加入到 11 当中,本文本讲的是 JEP 330 这个新特性. 化繁为简,一个命令编译运行源代码 看下面的代码 ...

  8. Java架构师最关键三个思维转变方式,框架的合理运用

    很久没有写思维的文章,特别是在写完思维的逻辑和思维的框架后,对于理论层面的自己也不太想写,但是对于实际案例层面的写起来又比较花时间,而且案例基本在IT专业领域不是所有人都能看明白. 我们前面写过思维的 ...

  9. Screen会话命令 Linux

    由于经常在服务器上运行程序,本地不可能一直和服务器保持连接,而且如果本地和服务器的连接断开,在服务器上运行的程序将会终止,为了,查找了一些网络资料,发现screen 会话命令可以保持本地和服务器断开后 ...

  10. dart之旅(三)- list

    list, 在 js 中被称为数组, 但是和 js 中的数组还是有不少不同的地方,我们来看一个例子: // 声明一个长度不可变的 list List<int> fixedLengthLis ...