经典全屏滚动插件fullPage.js
要写简单可以写的很简单，对着github上面的参数和注释随便写了个demo。这个插件十分高端大气上档次，配上良好的配色和布局，简单几笔就可以把网站装扮得十分洋气。
唯一的缺点就是，感觉对移动端的兼容性略有不足。
下面是我的demo。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>fullPage</title>
<link rel="stylesheet" type="text/css" href="./js/fullpage/jquery.fullPage.css" />
<style type="text/css">
body {
font-family: arial,helvetica;
color: #F2F2F2;
} h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
margin: 0;
padding: 0;
color: #444;
} h1{
font-size: 6rem;
} p{
font-size: 2rem;
} .section{
text-align: center;
} .section h1{
color: #fff;
}
.section p{
opacity: 0.8;
} #section1 h1{
color: #444;
} #section1 p{
color: #333;
opacity: 0.4;
} </style>
</head>
<body>
<div id="fullpage">
<div class="section" id="section1">
<h1>fullPage.js</h1>
<p>jQuery Version</p>
</div>
<div class="section" id="section2">
<h1>So Convinient</h1>
<p>so small after gzipped</p>
<p>Amazing ！！！</p>
</div>
<div class="section" id="section3">
<div class="slide">
<h1>It's a Nice Tool ！</h1>
<p>It's neccessary</p>
<p>when we do the work</p>
</div>
<div class="slide">
<h1>Beautiful ！</h1>
</div>
<div class="slide">
<h1>Neatly ！</h1>
</div>
</div>
<div class="section" id="section4">
<h1>I like it ！</h1>
</div>
</div> <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/fullpage/vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="./js/fullpage/vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="./js/fullpage/jquery.fullpage.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: '#menu',
lockAnchors: false,
anchors:['firstPage', 'secondPage'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: true,
slidesNavPosition: 'bottom', //Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
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 : ['#BFDA00', '#2C3E50', '#1F9377', '#AC4F2C'],
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0, //Custom selectors
sectionSelector: '.section',
slideSelector: '.slide', //events
onLeave: function(index, nextIndex, direction){
console.log("onLeave");
},
afterLoad: function(anchorLink, index){
console.log("afterLoad");
},
afterRender: function(){
console.log("afterRender");
},
afterResize: function(){
console.log("afterResize");
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
console.log("afterSlideLoad");
},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){
console.log("onSlideLeave");
}
});
});
</script>
</body>
</html>
github
https://github.com/zcynine/fullPage.js
API
http://www.dowebok.com/77.html
经典全屏滚动插件fullPage.js的更多相关文章
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- 学习 | jQuery全屏滚动插件FullPage.js
简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...
- 拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
- 仿小米网jQuery全屏滚动插件fullPage.js
演 示 下 载 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...
- 【转载】jQuery全屏滚动插件fullPage.js
文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...
- jQuery 全屏滚动插件 fullPage.js 参数说明
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...
- jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)
1.fullPage.js是什么? fullPage.js 是一个基于 jQuery ,用来制作全屏网站的插件. 2.兼容性: - jquery兼容:兼容 jQuery 1.7+ - 浏览器兼容: I ...
- 制作手机相册 全屏滚动插件fullpage.js
今天是端午自己做了一个小的送祝福链接 这里用到了fullpage插件 $('#container').fullpage({ navigation: false, //navigatio ...
- jQuery全屏滚动插件fullPage.js
github https://github.com/alvarotrigo/fullPage.js demo http://alvarotrigo.com/fullPage/ 脚手架 <link ...
随机推荐
- eg_7
1. 给定Map,根据Map中的值从大到小排列 package com.studentmanager.www; import java.util.ArrayList; import java.util ...
- java中方法传入参数时：值传递还是址传递？
JAVA中的数据类型有两大类型: ① 基本数据类型:逻辑型(boolean).文本型(char).整数型(byte.short.int.long).浮点型(float.double) ② 引用数据类型 ...
- 父元素如果为none，子元素也是看不到的
1.最近遇到一个问题,就是获取一个子元素的offsetwidth 的值总是为0 .原因是因为把父元素给设置成none了. 2.给元素赋值宽高 div.style.width=330+'px' 要加上p ...
- 1014 C语言文法定义
<程序>→<外部声明>|<程序><外部声明><外部声明>→<函数定义>|<声明><函数定义>→<数 ...
- HBase 架构与工作原理2 - HBase 组件
本文系转载,如有侵权,请联系我:likui0913@gmail.com 一.HBase 组件概览 Master-Slave 模式: HBase 体系结构遵循传统的 master-slave 模式,由一 ...
- （暂时弃坑）（半成品）ACM数论之旅18---反演定理 第二回 Mobius反演（莫比乌斯反演）（(づ￣3￣)づ天才第一步，雀。。。。）
莫比乌斯反演也是反演定理的一种 既然我们已经学了二项式反演定理 那莫比乌斯反演定理与二项式反演定理一样,不求甚解,只求会用 莫比乌斯反演长下面这个样子(=・ω・=) d|n,表示n能够整除d,也就是d ...
- firewall和iptables
防火墙有这三种方式,firewalld.iptables.ebtables,现在的centOS7使用的是firewalld. 下面是一些总结: 查看当前firewalld的状态 firewall-cm ...
- java.io.FileNotFoundException: generatorConfig.xml (系统找不到指定的文件。)
在使用MyBatis的逆向工程生成代码时,一直报错java.io.FileNotFoundException: generatorConfig.xml (系统找不到指定的文件.),如图 文件结构如下: ...
- CF1088F Ehab and a weird weight formula 贪心 倍增
CF1088F Ehab and a weird weight formula 题意 给定一棵树,点有点权,其中这棵树满足除了权值最小的点外,每个点至少有一个点权小于它的相邻点. 要求你重新构建这棵树 ...
- 【BZOJ2423】最长公共子序列（动态规划）
[BZOJ2423]最长公共子序列(动态规划) 题面 BZOJ 洛谷 题解 今天考试的时候,神仙出题人\(fdf\)把这道题目作为一个二合一出了出来,我除了orz还是只会orz. 对于如何\(O(n^ ...