经典全屏滚动插件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 ...
随机推荐
- ThinkPhp输入参数过滤
I('id',0); // 获取id参数 自动判断get或者post,不存在时返回默认值0 I('post.name','','htmlspecialchars'); //获取$_POST['name ...
- sprintf函数 %6.2f
%6.2f6表示数据表示至少6位,后面的.2表示小数点后保留两位 比如2342.123415用这个表示的话,结果就是2342.12如果不足六位就会在前面补空格超过六位的话正常显示 代码例子:int m ...
- Python入门：逻辑判断与运算符
这是关于Python的第6篇文章,主要介绍下逻辑判断与运算符. (一) 逻辑判断: 如果要实现一个复杂的功能程序,逻辑判断必不可少.逻辑判断的最基本标准:布尔类型. 布尔类型只有两个值:True和Fa ...
- poj 2942 Knights of the Round Table(点双连通分量+二分图判定)
题目链接:http://poj.org/problem?id=2942 题意:n个骑士要举行圆桌会议,但是有些骑士相互仇视,必须满足以下两个条件才能举行: (1)任何两个互相仇视的骑士不能相邻,每个骑 ...
- html select options & vue h render
html select options & vue h render https://developer.mozilla.org/en-US/docs/Web/HTML/Element/opt ...
- bzoj1036 [ZJOI2008]树的统计Count（树链剖分）
Description 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w.我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. Q ...
- 在HL引擎中制作自定义高清贴花
你是不是想过要做自定义的子弹孔.喷漆或者一些自定义的痕迹呢? 如果按照HL引擎的基本FA,首先要在decals.wad里加入我们自定义的纹理,然后利用gEngfuncs.pEfxAPI->R_D ...
- MT【157】至少一个小于1
若函数$f(x)=x^2+ax+b$有两个不等实数根$x_1,x_2$,且$1<x_1<x_2<3$,那么$f(1),f(3)中$ ( )A.只有一个小于1 B.至少 ...
- 【uoj122】 NOI2013—树的计数
http://uoj.ac/problem/122 (题目链接) 题意 给出一棵树的dfs序和bfs序,保证一定可以构成一棵树.问构成的树的期望深度. Solution 这是一个悲伤的故事,我YY的东 ...
- 单点登录(九)-----遇到问题-----FileNotFoundException: class path resource-UsernamePasswordWrapperAuthenticatio
运行cas server 项目时 报错 FileNotFoundException: class path resource-UsernamePasswordWrapperAuthenticatio ...