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

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

    第一步

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    先根据之前写好的工厂创建了三个测试，以便于观察，由于是用的背景图片，第二个参数就直接放的空数组了，不放东西会直接报错。 .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")
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    addComponent type为rongqi的生成器

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

    // 根据参数属性对象进行赋值
var Comdarongqi = function(config,people){
    var $Div = $("
    ");
    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    第三步

    这里我做的是左边这个容器的距离和动画效果的，只是容器，没有添加任何内容
    在这里插入图片描述

    第四步

    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")
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    addComponent contJs生成器

    var ComcontJs = function (config,people){
    var $Bj = $(".contBj");
    var $Div = $("
    ");
    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指向改变了之后发现还是无法解决这个错误，这个问题就出现在这里
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

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

    var ComcontJs = function (config,people){
    var $Bj = $(".contBj");
    var $Div = $("
    ");
    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)
     })
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    第五步

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

    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")
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92

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

    var comcontJstext = function(config){
   var $Boxdiv = $("
    ");
   var $Div = $("

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

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

    .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)"})
            }
        },
    }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51

    addcomponent indexCure生成器

    var comInterCure = function(config){
    var arr = [];
    var $controngqi = $(".section").size();
    for(var i = 0; i < $controngqi; i ++){
    			//根据section生成几个，我觉得这 i 就是精髓
        arr[i] = $("
    ");
        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.append(arr);
    config.css && $Div.css(config.css);
    $Home.append($Div);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    点击事件的检测

    //这里稍微偷了一下懒，是直接用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)
            })
        })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

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

  • 相关阅读:
    面试题：重载和重写的区别 + 接口和抽象类的区别
    FPGA - ZYNQ Cache一致性问题
    【测开方法论】学习后如何举一反三
    C++11 list::splice()函数的使用
    NodeMCU ESP8266 的定时器使用以及非堵塞程序的实现
    Spring修炼之旅（4）静态/动态代理模式与AOP
    tiup cluster enable
    嵌入式开发：提示和技巧——用C进行防御性编程的最佳实践
    Greenplum数据库外部表——url_curl创建销毁
    Weblogic SSRF漏洞
  • 原文地址：https://blog.csdn.net/Yzhoun/article/details/126205290