2015/10/14
阅读量：3390
发布时间：2015-10-14 22:39:28
今日工作
fullPage.js的学习
fullPage是基于jQuery的一款网页全屏切换、滚动的的插件，可以轻松的实现鼠标滚动、键盘控制和手机触摸控制。
作者来源于西班牙，以下是作者的自我简介
My name is Álvaro Trigo. I'm from Spain and i'm 27 years old. Currently living and working as a web developer in Cambridge, UK.
fullPage是作者放在github的开源项目，超过七十个人作出贡献，在github上JavaScript插件排名前50名
一下是fullPage的基本HTML DOM
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>fullPage.js — 基本演示_dowebok</title>
<link rel="stylesheet" href="http://cdn.dowebok.com/77/css/jquery.fullPage.css">
<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
<script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdn.dowebok.com/77/js/jquery.fullPage.min.js"></script>
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
});
});
</script>
</head>
<body>
<div id="dowebok">
<div class="section">
<h3>第一屏</h3>
<p>fullPage.js — 基本演示</p>
</div>
<div class="section">
<div class="slide"><h3>第二屏的第一屏</h3></div>
<div class="slide"><h3>第二屏的第二屏</h3></div>
<div class="slide"><h3>第二屏的第三屏</h3></div>
</div>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
<p>这是最后一屏</p>
</div>
</div>
</body>
</html>
今天简单的展示这个DOM，以后会做专门的讲解fullPage
这可看本站的 fullPage 示例
当前没有评论