2015/10/14
阅读量:3206
发布时间: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 示例
当前没有评论