用自己的fullpage模拟出字节校招的fullpage

首先看一下它的布局
整块区域用的背景图，然后一个左边固定的容器，右边固定锚点导航，
由于自己写的fullpage插件并没有鼠标点击事件，于是又临时加了一个点击事件进去，但是可能扩展不怎么好
下面是我写的布局
未解决的问题：背景图片无法做到自适应，当浏览器窗口发生变化时，需要再次刷新网页，不然就会出现高度不够的情况，下面写写是怎么实现的吧

第一步

我先用pageEngine.init创建启动接口,

pageEngine.init(".box",[])
.addSection("toutiao")
.addSection("douyin")
.addSection("douyinfire")
})

先根据之前写好的工厂创建了三个测试，以便于观察，由于是用的背景图片，第二个参数就直接放的空数组了，不放东西会直接报错。 .box是需要自己在Html里面写的
接下来

第二步

pageEngine.init(".box",[])
.addSection("toutiao")
//这是留的一个接口，方便自定义定制容器，也就是这玩意儿让我后面够呛
.addComponent({
    type : "rongqi", //利用Swich case来选择不一样的容器生成
    width : "100%",
    height : "100%",
    css : {
        backgroundImage : "url(images/fullpage/zjtdbj.png)",
        backgroundSize : (window.innerHeight, window.innerWidth)
    }
})
.addSection("douyin")
.addSection("douyinfire")
})

addComponent type为rongqi的生成器

第一个还是没有什么问题，目前为止我测试都还没有出现Bug

// 根据参数属性对象进行赋值
var Comdarongqi = function(config,people){
    var $Div = $("<div class = 'contBj' />");
    config.className && $Div.addClass(config.className);
    config.width && $Div.css("width", config.width);
    config.height && $Div.css("height", config.height);
    config.css && $Div.css(config.css);
    //就是这里的返回值让我够呛，将$Div抛到pageEngine里面去进行加工
    return $Div;
}

第三步

这里我做的是左边这个容器的距离和动画效果的，只是容器，没有添加任何内容

第四步

pageEngine.init(".box",[])
.addSection("toutiao")
//这是留的一个接口，方便自定义定制容器，也就是这玩意儿让我后面够呛
.addComponent({
    type : "rongqi", //利用Swich case来选择不一样的容器生成
    width : "100%",
    height : "100%",
    css : {
        backgroundImage : "url(images/fullpage/zjtdbj.png)",
        backgroundSize : (window.innerHeight, window.innerWidth)
    }
})
.addComponent({
	//第二个容器生成
    type : "contJs",
    width: "500px",
    height: "400px",
    position: "absolute",
    css : {
        bottom: "50px",
        left: "130px",
        opacity : 0
    },
    animateIn : {
        bottom: "220px",
        left: "130px",
        opacity : 1
    },
    animateOut : {
        bottom: "50px",
        left: "130px",
        opacity : 0
    },
    delay : 100,
})
.addSection("douyin")
.addSection("douyinfire")
})

addComponent contJs生成器

var ComcontJs = function (config,people){
    var $Bj = $(".contBj");
    var $Div = $("<div class = 'component contJs' />");
    config.className && $Div.addClass(config.className);
    config.height && $Div.css("height",config.height);
    config.width && $Div.css("width",config.width);
    config.position && $Div.css("position" ,config.position);
    config.css && $Div.css(config.css);
    $Div.on("cpLeave", function () {
        var self = this;
        setTimeout(function () {
           config.animateOut && $(self).animate(config.animateOut)
        }, config.delay);
     });
     $Div.on("cpLoad", function () {
        var self = this;
        setTimeout(function () {
           config.animateIn && $(self).animate(config.animateIn)
        }, config.delay);
     });
     return $Div
     //我开始就是这样写的，然后这个contJs始终塞不进去contBj里面，并且被执行超级多次，基本上每调用一次addComponent都会生成一个contJs，一开始我的想法是改变This的指向，因为这里的this指向的是window，并不是toutiao的这个容器，再我吧This指向改变了之后发现还是无法解决这个错误，这个问题就出现在这里
}

就是我每次生成的就只会被插入再section这个容器里面，或这是silde里，就导致我怎么都塞不进去，而且会多次执行方法，在我绞尽脑子于是我就不返回参数了，我直接在工厂里面对contBj进行添加

var ComcontJs = function (config,people){
    var $Bj = $(".contBj");
    var $Div = $("<div class = 'component contJs' />");
    config.className && $Div.addClass(config.className);
    config.height && $Div.css("height",config.height);
    config.width && $Div.css("width",config.width);
    config.position && $Div.css("position" ,config.position);
    config.css && $Div.css(config.css);
    $Div.on("cpLeave", function () {
        var self = this;
        setTimeout(function () {
           config.animateOut && $(self).animate(config.animateOut)
        }, config.delay);
     });
     $Div.on("cpLoad", function () {
        var self = this;
        setTimeout(function () {
           config.animateIn && $(self).animate(config.animateIn)
        }, config.delay);
     });
     //我在这里直接就给他塞进去
     $Bj.each(function(index,ele){
      $(ele).append($Div)
     })
}

第五步

这里基本就全是数据内容啊图片路径和一些动画预设之类的

pageEngine.init(".box",[])
.addSection("toutiao")
//这是留的一个接口，方便自定义定制容器，也就是这玩意儿让我后面够呛
.addComponent({
    type : "rongqi", //利用Swich case来选择不一样的容器生成
    width : "100%",
    height : "100%",
    css : {
        backgroundImage : "url(images/fullpage/zjtdbj.png)",
        backgroundSize : (window.innerHeight, window.innerWidth)
    }
})
.addComponent({
	//第二个容器生成
    type : "contJs",
    width: "500px",
    height: "400px",
    position: "absolute",
    css : {
        bottom: "50px",
        left: "130px",
        opacity : 0
    },
    animateIn : {
        bottom: "220px",
        left: "130px",
        opacity : 1
    },
    animateOut : {
        bottom: "50px",
        left: "130px",
        opacity : 0
    },
    delay : 100,
})
//第三个生成器，当然这个也出现和之前的一样的bug，而且我一开始也不知道该怎么解决
.addComponent({
    type : "contJstext",
    logo :{
        width:  " 80px",
        height:" 80px",
        borderRadius: "5px",
        backgroundImage: "url(images/fullpage/zjtplogo.png)",
        backgroundSize: "100% 100%",
    },
    textBt :{
        width : " 100%",
        fontSize: "28px",
        text : "今日头条",
        opacity : 0,
        animateIn : {
            marginTop: "30px",
            opacity : 1,
        },
        animateOut : {
            marginTop: "80px",
            opacity : 0,
        },
        delay : 300,
    },
    logotext : {
        width : "100%",
        animateIn : {
            marginTop: "30px",
            opacity : 1,
        },
        animateOut : {
            marginTop: "200px",
            opacity : 0,
        },
        delay : 300,
    },
    p1text : {
        text : "今日头条是一款个性化资讯推荐引擎产品，致力于连接人与信息，让优质、丰富的信息得到高效、精准的分发，为用户创造价值。"
    },
    p2text : {
        text : "今日头条目前拥有科技、体育、健康、美食、教育、三农、国风、NBA 等超过 100 个垂直领域，覆盖了图文、图集、小视频、短视频、短内容、直播、小程序等多种信息体裁。"
    },
    p3text : {
        text : "https://www.toutiao.com/",
        href : "https://www.toutiao.com/",
    },
    p : {
        marginTop:" 20px",
        color:" #1f2329",
        fontSize: "14px"
    }
})
.addSection("douyin")
.addSection("douyinfire")
})

addComponent contJstext生成器
这里差不多都是塞进去，给样式赋值之类的重复代码搬运工

var comcontJstext = function(config){
   var $Boxdiv = $("<div class='component boxDiv' / >");
   var $Div = $("<div class='component logo' / >");
   var $textBt = $("<div class='component textBt' / >");
   var $logoText = $("<div class='component logotext' / >");
   var $P1 = $("<p />");
   var $P2 = $("<p />");
   var $P3 = $("<p />");
   var $A = $("<a href = '" + config.p3text.href +  " ' />");
 config.logo && $Div.css(config.logo);
 config.textBt && $textBt.css(config.textBt);
 config.textBt && $textBt.text(config.textBt.text);
 config.logotext && $logoText.css(config.logotext);
 config.p1text && $P1.text(config.p1text.text);
 config.p2text && $P2.text(config.p2text.text);
 config.p3text && $A.text(config.p3text.text);
 config.p && $P1.add($P2).add($P3).css(config.p);
    $textBt.on("cpLeave", function () {
        var self = this;
        setTimeout(function () {
           config.textBt.animateOut && $(self).animate( config.textBt.animateOut)
        }, config.textBt.delay);
     });
     $textBt.on("cpLoad", function () {
        var self = this;
        setTimeout(function () {
            config.textBt.animateIn && $(self).animate( config.textBt.animateIn)
        }, config.textBt.delay);
     });
     $logoText.on("cpLeave", function () {
        var self = this;
        setTimeout(function () {
           config.logotext.animateOut && $(self).animate(config.logotext.animateOut)
        }, config.logotext.delay);
     });
     $logoText.on("cpLoad", function () {
        var self = this;
        setTimeout(function () {
            config.logotext.animateIn && $(self).animate( config.logotext.animateIn)
        }, config.logotext.delay);
     });

    $P3.append($A);
    $logoText.append($P1);
    $logoText.append($P2);
    $logoText.append($P3);
    $Boxdiv.append($Div)
    $Boxdiv.append($textBt)
    $Boxdiv.append($logoText)
    //一样的对每个contJS进行塞进去
    $(".contJs").each(function(index,ele){
      $(ele).append($Boxdiva)
    })
}

基本上样式布局就做好了，接下来就是做动画效果还有鼠标点击事件

这里我又用了一个生成器来生成鼠标右边鼠标点击的容器

.addComponent({
    type : "indexCure",
    css : {
        position : "fixed",
        right : "130px",
        top : 0,
        bottom : 0,
        margin : "auto 0",
        width : "40px",
        height : "70%",
    },
    logocontbox : {
        margin : "0 auto",
        width : "33px",
        height : "33px",
        borderRadius : "50%",
        marginBottom : "20px",
        backgroundColor : "blue",
        cursor:"pointer",
        backgroundSize : "100% 100%",
        transition:" 0.2s"
    },
    logoimg : {
        "0" : {
            backgroundImage : "url(images/fullpage/zjtdon.png",
        },
        "1" : {
            backgroundImage : "url(images/fullpage/dyon.png",
        },
        "2" : {
            backgroundImage : "url(images/fullpage/dyfireon.png",
        },//为什么要用1 2 3，我觉得是为了方便找索引
    },
    event : {
    //这是两个事件，鼠标移入移出那个图标变大的事件
        "mouseover" : function (){
        $(this).css({
            transform: "scale(1.4)",
            boxadShow : "0 9px 18px 0 rgb(0 0 0 / 15%)"
        })
        },
        "mouseout" : function (){
            var indexof = $(this).index();
            //激活的就不让他变小
            if($($(".section")[indexof]).hasClass("active")){
            }else{
                $(this).css({ transform:"scale(1)"})
            }
        },
    }
})

addcomponent indexCure生成器

var comInterCure = function(config){
    var arr = [];
    var $controngqi = $(".section").size();
    for(var i = 0; i < $controngqi; i ++){
    			//根据section生成几个，我觉得这 i 就是精髓
        arr[i] = $("<div class = '" + i + " logoindex '  / >");
        config.logocontbox && $(arr[i]).css(config.logocontbox);
        config.logoimg && $(arr[i]).css(config.logoimg[i]);
        //
        if(config.event){
            for(var prop in config.event){
              arr[i].on(prop, config.event[prop]);
            }
        }
    }
    var $Home = $(".box");
    var $Div = $("<div></div>");
    $Div.append(arr);
    config.css && $Div.css(config.css);
    $Home.append($Div);
}

点击事件的检测

//这里稍微偷了一下懒，是直接用jq找到他绑定的方法
 $logo.on("click", function () {
           var a = $(this).attr("class");
           var str = a.split(" ")
            var newtop = -clientHeight * str[0];//利用这个class类名进行屏幕整屏移动，就是那个 i ，不过好像index()也可以
            var dicrction = "";
            //我在全局命名了一个frist变量，启动用
            var last = $(this).index(); 
            $(this).off("mouseleave")
            if(last > frist){
                dicrction = "bottom";
                config.onLeave(frist,dicrction);
            }else if(last < frist){
                dicrction = "top";
                config.onLeave(frist,dicrction);    
            }else{
            //如果点击的相等，那就不动
                newtop = newtop;
            }
            $W.animate({ top: newtop }, 500, "swing", function () {
                key = true;
                $Section.eq(last).addClass("active");  
                $Section.eq(frist).removeClass("active")
                curindex = last;
                //点击之后的图标变大效果
                $($logo[last]).css({transform:"scale(1.4)"})
                $($logo[frist]).css({transform:"scale(1)"})
                frist = last;
                config.afterLoad(frist, dicrction)
            })
        })

对于小白来说真太难了，也太费时间了，写了好久，不过总算是完成了，有大佬知道怎么实现窗口变了也能自动适应吗，就纯js或者jq，其他的还没有学到那里去