fullPage的简单使用

fullPage.js是开源的JQuery插件库，

Github地址
下载之后导入

<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="fullPage/CSS/jquery.fullPage.css" />
<!--fullPage.js依赖jquery-->
<script src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="fullPage/JS/jquery.fullPage.min.js"></script>

html部分

<div id="ido"><div class="section">第一屏</div><div class="section">第二屏</div><div class="section"><div class="slide">第三屏的第一屏</div><div class="slide">第三屏的第二屏</div><div class="slide">第三屏的第三屏</div><div class="slide">第三屏的第四屏</div></div><div class="section">第四屏</div></div>

编写html的页面结构，每个section独占一屏幕，默认显示第一屏。
如果需要从非第一屏开始显示，则需要给对应的section添加active样式类即可。
编写初始化的脚本（js部分）

$(function() {$('#ido').fullpage();
});

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="fullPage/CSS/jquery.fullPage.css" /><script src="js/jquery-1.11.3.js"></script><script type="text/javascript" src="fullPage/JS/jquery.fullPage.min.js"></script><title>Document</title><style type="text/css">body{color: #FFFFFF;text-align: center;}</style>
</head><body><div id="ido"><div class="section">第一屏</div><div class="section">第二屏</div><div class="section"><div class="slide">第三屏的第一屏</div><div class="slide">第三屏的第二屏</div><div class="slide">第三屏的第三屏</div><div class="slide">第三屏的第四屏</div></div><div class="section active">第四屏</div></div>
</body><script>$(function() {$("#ido").fullpage({sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']});});</script>
</body>
</html>

默认第四个先显示

第三个屏，可以横着切换

fullPage的简单使用相关推荐

「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源
包管理器托管JavaScript库并提供用于获取和打包它们的工具. npm - npm是JavaScript的包管理器. Bower - 网络包管理器. component - 用于构建更好的Web ...
谁也别拦我！今天我要曝光JavaScript 资源大全中文版！
JavaScript 资源大全中文版我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 ...
JavaScript资源大全中文版（Awesome最新版--转载自张果老师博客）
JavaScript资源大全中文版(Awesome最新版) 目录前端MVC 框架和库包管理器加载器打包工具测试框架框架断言覆盖率运行器 QA 工具基于 Node 的 CMS 框架 ...
awesome-javascript
一系列令人敬畏的浏览器端JavaScript库,资源和闪亮的东西. 令人敬畏的JavaScript 包管理员装载机捆扎机测试框架 QA工具 MVC框架和库基于节点的CMS框架模板引擎文章/ ...
JavaScript资源大全中文版（Awesome最新版）
转载自:http://www.cnblogs.com/best/p/5909023.html#_label0 目录前端MVC 框架和库包管理器加载器打包工具测试框架框架断言覆盖率运行 ...
用于移动端的相关网址
fullpage:插件简单介绍 fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站. 主要功能有:支持鼠标滚动 ,支持前进后退和键盘控制,多个回调函数,支持 ...
JavaScript资源大全
转载地址:http://www.cnblogs.com/libin-1/p/5941690.html 目录前端MVC 框架和库包管理器加载器打包工具测试框架框架断言覆盖率运行器 QA ...
JavaScript 资源大全中文版
JavaScript 资源大全中文版我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 ...
javascript功能插件大集合前端常用插件 js常用插件
包管理器管理着 JavaScript 库,并提供读取和打包它们的工具. npm:npm 是 JavaScript 的包管理器.官网 Bower:一个 web 应用的包管理器.官网 component ...
转【FullPage.js 应用参数参考与简单调用】
简介如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站 ...

fullPage的简单使用

fullPage的简单使用相关推荐

最新文章

热门文章