JavaScript--fullPage.js插件
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插件的更多相关文章
- 整屏滚动效果 jquery.fullPage.js插件+CSS3实现
最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...
- fullPage.js插件用法(转发)
fullPage.js主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速 ...
- 【干货】教你如何利用fullPage.js以及move.js插件打造高端大气的网站效果!
前言: 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次. 在学习过jQuery插件之后,才发现之前的很多网站特效完全可 ...
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- fullpage.js全屏滚动插件使用方法
在移动端经常会用到全屏滚动插件,实现常见H5活动页的效果,fullpage是一个很不错的jquery全屏滚动插件 fullpage.js插件的API:http://www.dowebok.com/77 ...
- fullpage.js的easing参数怎样配置自定义动画
首先看非官方文档 并没有详细的说明怎样去使用easing.js,所以我加的运动属性根本就不起作用, 再看,官方文档 Optionally, when using css3:false, you can ...
- fullpage.js与animate.css搭配使用
jquery的fullpage.js插件的使用 https://alvarotrigo.com/fullPage/#3rdPage 官网 https://github.com/alvarotrig ...
- fullpage.js全屏滚动插件使用小结
刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...
- FullPage.js全屏滚动插件学习总结
如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果 ...
- 仿小米网jQuery全屏滚动插件fullPage.js
演 示 下 载 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...
随机推荐
- 带权单源最短路发[稠密图](Dijkstra)
对于稠密图,采用邻接矩阵较为合适 所以我们先构建一个邻接矩阵 typedef int Vertex; typedef int WeightType; //图 typedef struct MyGrap ...
- Docker集群管理工具 - Kubernetes 部署记录 (运维小结)
一. Kubernetes 介绍 Kubernetes是一个全新的基于容器技术的分布式架构领先方案, 它是Google在2014年6月开源的一个容器集群管理系统,使用Go语言开发,Kubernete ...
- 剑指offer编程题Java实现——面试题14调整数组顺序使奇数位于偶数之前
题目: 输入一个整数数组,实现一个函数来调整该数组中数组的顺序,使得所有的奇数位于数组的前半部分,偶数位于数组的后半部分. 解题思路:数组中维护两个指针,第一个指针初始化时候指向数组头部,第二个指针初 ...
- Python语法基础——关于全局变量与局部变量
1.函数内部的变量名如果第一次出现,且出现在=前面,即被视为定义一个局部变量,不管全局域中有没有用到该变量名,函数中使用的将是局部变量,例如: num = 100 def func(): num = ...
- LeetCode--No.015 3Sum
15. 3Sum Total Accepted: 131800 Total Submissions: 675028 Difficulty: Medium Given an array S of n i ...
- rocketmq自启动配置
捣鼓rocketmq自启动半天发现是启动脚本里没有声明java环境 现记录下 脚本 #!/bin/bash export JAVA_HOME=/opt/data/jdk1.8/jdk1.8.0_161 ...
- 服务器运维 -- windows系统更换System32下文件后 重启无法进入桌面
场景描述: windows系统更换System32下文件后 重启无法进入桌面 情况1,原替换文件有备份 解决建议: 准备好该文件 情况2,原备份文件没有备份 解决建议:从相同版本的服务器上边 ...
- 关于一个div上下左右居中的css方法
1:通过position:absolute定位,上下左右的值都设为0,margin:auto:需要知道div的宽高 { width: 64px; height: 64px; border: 1px s ...
- ubuntu 增加一个用户 并赋予权限
一.添加一个用户 sudo adduser tommy //添加一个tommyd的用户 sudo passwd tommy // 修改密码 回车后出现一下提示 输入密码即可Changing pass ...
- ACM学习<3>
排序算法: 基本:冒泡,快速,选择,堆,插入,shell 多路并归: 1.冒泡排序: 思想:交换排序,通过相邻的交换来达到排序的目的. 流程: ...