fullPage代码从基层往上爬（一）

自己打算通过fullPage.js来好好巩固滚轮事件、兼容性实现、jquery、函数封装等等….
这一部分先完成fullPage的基础功能，接下来就会进行封装、优雅降级、添加功能等…

• html代码结构
• css布局
• jquery实现基础功能

---

html代码结构

最简单的结构，就不做详细说明了

    <div class="section-group">      <section class="area-01" data-title="标题一"><h2>标题一</h2></section>      <section class="area-02" data-title="标题二"><h2>标题二</h2></section>      <section class="area-03" data-title="标题三"><h2>标题三</h2></section>      <section class="area-04" data-title="标题四"><h2>标题四</h2></section>    </div>

 

css布局

布局也简单,挑重点贴

    .section-group{      width:100%;height:100%;position:relative;      -webkit-transition:1s cubic-bezier(.74,0,.2,1);      transition:1s cubic-bezier(.74,0,.2,1);    }    .section-group >section{      width:100%;height:100%;overflow:hidden;    }/*右边的ul条**/.pagination {        position: absolute;        top: 50%;        transform: translateY(-25%);        right: 50px;        z-index: 999;    }    .pagination >li{      width:14px;height:14px;background:rgba(0,0,0,.6);margin:16px 0;       border-radius:50%;cursor:pointer;position:relative;      list-style:none;    }    .pagination >li >span{        line-height:26px;background:rgba(0,0,0,.6);border-radius:13px;        white-space:nowrap;font-size:12px;color:#fff;opacity:0;        -webkit-transition:.6s;transition:.6s;        -webkit-transform:translateX(20px);transform:translateX(20px);    }    .pagination >li:hover >span,.pagination >li.active >span{      opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}

 

jquery实现基础功能

/** 这里还只支持IE8+ */$(function(){    var group = $('.section-group');    var sections = group.find('section');    var sectionLength = sections.length;    var index = 0,translateY;onMove=false;    //侧边    var pagination = function(){        var lis = ['<ul class=\"pagination\">'];        for(var i = 0;i<sectionLength;i++){            title = sections.eq(i).data('title');//data-title            lis.push('<li><span>'+ (title?title:'') +'</span></li>');        }        lis.push('</ul>');        return lis.join('');    }    $("body").append(pagination());    $("ul.pagination>li").eq(0).addClass('active');//默认第一个li选中    $("ul.pagination>li").click(function(){      //li点击事件编写        if(onMove){return;}         var _this = $(this);        _this.addClass('active');        _this.siblings().removeClass('active');        index = _this.index();        translateY = index*100;        onMove = true;        group.css({        '-webkit-transform':'translateY(-'+ translateY +'%)',        'transform':'translateY(-'+ translateY +'%)'        });        setTimeout(function () {//为了防止滚轮时间不断被触发         onMove = false;        }, 500);    })    // jquery 兼容的滚轮事件    $(document).on("mousewheel DOMMouseScroll", function (e) {         if(onMove){return;}         var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie                    (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox        if (delta > 0) {            if(index<=0){                return;            }            else{index--;}            $("ul.pagination>li").eq(index).click();        } else if (delta < 0) {            if(index>sectionLength-2){                return;            }            else{index++;}            $("ul.pagination>li").eq(index).click();        }    });})