2015/10/14

阅读量:2908

发布时间: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 示例

 










当前没有评论