经典全屏滚动插件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 ...
随机推荐
- Week2-作业1-part2.阅读与思考
第一章.概论 原文: 在成熟的航空工业中,一个飞机发动机从构思到最后运行,不知道经历过多少人.多少工序.多少流程.多少相关知识的验证.我们无法想象,某个商用型号的发动机在飞行时发现问题,最初的设计师会 ...
- Week 2
第1章:概论1.原文“这些软件企业的商业模式有些事合情合理也合法:有些看似合情合理,但不怎么合法:有些做法不合 理,但是还没有出台相关的法律.在相关法律完善之前,软件行业还有一个行规,即应该有职业道德 ...
- js 小程序获取本周七天
data: { weekdays:['','','','','','',''] }, onLoad: function (options) { let that = this; let now ...
- php父级目录文件包函问题
问题: php子目录不能包函父目录中的文件. 环境: 网站根目录:/var/www/html/ PHP版本: 5.3.3 Apache版本:2.2 好了,创建三个文件: //文件路径:/var/www ...
- IE实现userData 永久存储
注意:只支持IE5,及其以上的浏览器 //需要使用 if 条件注释 <!DOCTYPE html> <html> <head> <meta charset ...
- 【BZOJ2839】集合计数（容斥，动态规划）
[BZOJ2839]集合计数(容斥,动态规划) 题面 BZOJ 权限题 Description 一个有N个元素的集合有2^N个不同子集(包含空集),现在要在这2^N个集合中取出若干集合(至少一个),使 ...
- Android App Architecture使用详解
Android应用架构简介 对于经过过构建app的Android开发人员来说, 现在是时候了解一下构建鲁棒, 质量高的应用的最佳实践和推荐架构了. 这篇文章假设读者对Android framework ...
- 【XSY2753】LCM
Description 给你\(n,k\),要你选一些互不相同的正整数,满足这些数的lcm为\(n\),且这些数的和为\(k\)的倍数. 求选择的方案数.对\(232792561\)取模. \(n\l ...
- Redis事务介绍
概述 相信学过Mysql等其他数据库的同学对事务这个词都不陌生,事务表示的是一组动作,这组动作要么全部执行,要么全部不执行.为什么会有这样的需求呢?看看下面的场景: 微博是一个弱关系型社交网络,用户之 ...
- Android 系统回收资源时进程被杀的优先级
http://developer.android.com/guide/components/processes-and-threads.html#Processes Android 操作系统的内存回收 ...