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

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();
        }
    });

})