经典全屏滚动插件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 ...
随机推荐
- 18_集合框架_第18天_集合、Iterator迭代器、增强for循环 、泛型_讲义
今日内容介绍 1.集合 2.Iterator迭代器 3.增强for循环 4.泛型 01集合使用的回顾 *A:集合使用的回顾 *a.ArrayList集合存储5个int类型元素 public stati ...
- 解决登录不上网页得tomcat（授权manager-gui角色的操作如下）
1:编辑/usr/local/tomcat/conf/tomcat-users.xml文件,在没有注释的内容中添加: <role rolename="manager-gui" ...
- 钉钉开发c#帮助类 获取用户信息 DingHelper.cs
using System;using System.Collections.Generic;using System.Configuration;using System.Linq;using Sys ...
- vSphere Client 连接ESXi 或者是vCenter 时虚拟机提示VMRC异常的解决办法
1. 自己的vSphere 连接vCenter 向管理虚拟机 结果发现总是有异常. 提示如图示 VMRC控制台的连接已经断开 2. 花了比较长的时间也没搞定. 后来百度发现 关闭一个进程 然后重新登录 ...
- [总结] Visual Studio 报价已经对比
来源微软官方网站 对比 https://visualstudio.microsoft.com/zh-hans/vs/compare/?rr=https%3A%2F%2Fwww.ithome.com%2 ...
- InvalidArgumentError: You must feed a value for placeholder tensor 'Placeholder_1' with dtype float and shape [?,10]
在莫烦Python教程的“Dropout 解决 overfitting”一节中,出现错误如下: InvalidArgumentError: You must feed a value for plac ...
- BZOJ5105 CodePlus2017晨跑
这个题???我WA了两发??? #include<iostream> #include<cstdio> #include<cmath> #include<cs ...
- BZOJ3240 NOI2013矩阵游戏（数论）
必修五题. // luogu-judger-enable-o2 #include<iostream> #include<cstdio> #include<cmath> ...
- Java参数引用传递之例外：null
今天写链表的时候写了一个函数,实参是一个空链表,应该是按引用传参,但是在函数内修改了链表,外部的链表没有变化. 原来是null作为参数传递的时候,就不是引用传参了. 引自:http://blog.cs ...
- Linux服务器中安装python包管理工具pip
pip是python的包管理工具,python的强大之处除了在于语法的简练,还有就是对众多的库支持了. 1.下载pip包管理工具 链接地址:https://pypi.python.org/pypi/p ...