经典全屏滚动插件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 ...
随机推荐
- 关于51精确延时及keil仿真延时时间
转自:http://blog.sina.com.cn/s/blog_980e19e00101b5dh.html 有时候需要精确的延时,比如18B20温度传感器对时序要求非常严格,必须精确到微秒级别 一 ...
- C1WPF制作OLAP Cube浏览工具
经过前期一段时间对WPF的学习了解,相信大家对WPF有了一定的了解.今天我们一起来了解使用Component One(简称C1)的WPF控件制作CUBE浏览工具.其实这个OLAP控件官方已经有了很详细 ...
- <构建之法>第一二三章感悟
第一章: 看了大概了解软件从一个想法到最终成品的一个过程.软件先是由一个想法引出的,有那个想法,你需要一个工具去做什么,根据自己想要的功能大概做一个能实现基本功能的软件,对客户提出的要求进行完善,实现 ...
- 9th 学习博客：使用Codebloks实现C++的图形化界面
使用开发工具codeblocks,添加ResEdit.exe这个控件,可以很方便地进行图形化编辑,这是在网上找得教程,实现的是最基本的在对话框内添加按钮,并实现单击响应在控制台输出相应的文字. mai ...
- 高性能页面加载技术--BigPipe设计原理及Java简单实现
1.技术背景 动态web网站的历史可以追溯到万维网初期,相比于静态网站,动态网站提供了强大的可交互功能．经过几十年的发展,动态网站在互动性和页面显示效果上有了很大的提升,但是对于网站动态网站的整体页面 ...
- nodejs 新特性
一般时间没看nodejs了,又出了一些新特性了. 异步钩子 async_hooks 先看相关的文章吧 https://zhuanlan.zhihu.com/p/27394440 性能 ...
- hdu 5475 （线段树）
An easy problem Time Limit: 8000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)T ...
- tarjan解决路径询问问题
好久没更新了,就更一篇普及组内容好了. 首先我们考虑如何用tarjan离线求出lca,伪代码大致如下: def tarjan(x): 将x标记为已访问 for c in x的孩子: tarjan(c) ...
- 【BZOJ4036】按位或（Min-Max容斥，FWT）
[BZOJ4036]按位或(Min-Max容斥,FWT) 题面 BZOJ 洛谷 题解 很明显直接套用\(min-max\)容斥. 设\(E(max\{S\})\)表示\(S\)中最晚出现元素出现时间的 ...
- 洛谷 P4244 [SHOI2008]仙人掌图 II 解题报告
P4244 [SHOI2008]仙人掌图 II 题目背景 题目这个II是和SHOI2006的仙人掌图区分的,bzoj没有. 但是实际上还是和bzoj1023是一个题目的. 题目描述 如果某个无向连通图 ...