给我的个人简历添加动态效果-CSDN博客

个人简历

chineseheart.github.io/resume/

添加加载页动画

效果预览

css:
.loading{
  height:200px;width:200px;
  position:relative;
}
.loading::before, .loading::after{
  content:'';
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  background:gray;
  border-radius:50%;
  margin:auto;
  animation: s 2s linear infinite;
}
.loading::after{animation-delay: 0.75s;}
@keyframes s{
  0%{width:0;height:0;opacity:1}
 100%{width:100px;height:100px;opacity:0}
}
复制代码

说明

使用伪类写两个圈，他们的变化都是由小变大，由深变浅，同时after延迟0.75s

部署

将script写在最后（如果都加载出来了才能执行script），通过classList在两个css块中切换（display:flex,display:none）。

html:
<div id="siteWelcome" class="site-welcome active">
    <div class="loading"></div>
</div>

css：
.site-welcome{display: none;position:fixed;width:100%;height:100%;top:0;left:0;z-index: 1;justify-content: center;align-items: center;}
.site-welcome.active{display: flex;}

js：
siteWelcome.classList.remove('active')
复制代码

检测

使用开发者工具

Network→online→slow3G

Network→online→custom→add

假装部署（延迟消失）

    setTimeout(function(){
        siteWelcome.classList.remove('active')},2500
    )
复制代码

会变的导航栏

用js控制class，不同的class对应不同的css，

    window.onscroll = function(xxxx){
        if(window.scrollY > 0 ){
            topNavBar.classList.add('sticky')
            console.log(1)
        }else{
            topNavBar.classList.remove('sticky')
        }
    }
复制代码

小型动画

将下划线变成从左划到右边

.topNavBar nav>ul>li>a:hover::after{content:'';display:block;position:absolute;top:100%;left:0;width:100%;
background:#E6686A;height:3px;transform: all 0.75s;animation:meauSlide linear 1s}
@keyframes meauSlide{0%{width:0}100%{width:100%}}
复制代码

注意下图是bottom：0和top：100%的区别图，top:100%正确，其在依附元素外边而不是在里边紧贴底部。

添加二级菜单

<li><a href="#">SKILLS</a></li> 尽量加在a标签外面，<li><a href="#">SKILLS</a><ul> <li>作品1</li> <li>作品2</li> <li>作品3</li> </ul></li>

因为ul li是块级元素，所以会另起一行。同时他们不是绝对定位，会导致li宽度包裹住ul。绝对定位不受父元素影响，也不会影响父元素

加入绝对定位之后，会导致

因为li是一个浮动定位，其特点是能有多瘦就有多瘦，其中包含a作品文档流元素，所以其宽度能够包住（作品）即可，能有多瘦有多瘦。ul是一个绝对定位元素，没有宽度的话能缩多瘦缩多瘦。 .topNavBar .submeau>li{white-space: nowrap;}

此时遇到的问题：有多个meau需要加submeau，但是一个一个加会导致代码过于冗杂，

html:

<li><a class="meauTigger" href="#">BLOG</a>
<ul class="submeau">
    <li>博客1</li>
    <li>博客2</li>
    <li>博客3</li>
</ul></li>
<li><a class="meauTigger" href="#">SKILLS</a><ul class='submeau'>
    <li>作品1</li>
    <li>作品2</li>
    <li>作品3</li>
</ul></li>

js:

let aTags = document.getElementsByClassName('meauTigger')
for(let i=0;i<aTags.length;i++){
    aTags[i].onmouseenter = function(x){
    let a = x.currentTarget
    let brother = a.nextSibling
    while(brother.tagName !== 'UL'){
        brother = brother.nextSibling}
        brother.classList.add('active')
    }
    aTags[i].onmouseleave = function(x){
        let a = x.currentTarget
        let brother = a.nextSibling
        while(brother.tagName !== 'UL'){
        brother = brother.nextSibling
        }
        console.log(1)
    brother.classList.remove('active')
    }
}
复制代码

将a全部取出，利用循环来监听每一个a，使用function函数来确定当前监听的a，使用递归取nextSibling来准确确定ul（规避a与ul之间的文本），在ul上使用classList增删active；

这时候出现一个问题，当鼠标移入submeau时，submeau会消失。因为此时移出了a。解决办法：把在a上的class加在a和ul共同的父标签li上即可

js:

let liTags = document.getElementsByClassName('meauTigger')
for(let i=0;i<liTags.length;i++){
    liTags[i].onmouseenter = function(x){
    let li = x.currentTarget
    let brother = li.getElementsByTagName('ul')[0]
    brother.classList.add('active')
    }
    liTags[i].onmouseleave = function(x){
        let li = x.currentTarget
        let brother = li.getElementsByTagName('ul')[0]
        console.log(brother)
        brother.classList.remove('active')
    }
}
复制代码

li.getElementsByTagName('ul')[0]其中如果不加[0]，取出来的是一个包含ul 和li的数组，但是我们只需要ul（对他自己进行操作），所以使用[0]。

最后，因为移动到submeau时，红色下划线会消失，所以将active加在li标签上会更好

总结

不要尝试第一次就做出来，做的过程中会发现更好的办法
解决一个问题的关键是马上开始！会错一次，错两次，错三次，最终会发现最合适的办法。

导航栏点击跳转

因为有一个问题：我们的顶部导航栏是absolute，如果直接用a标签的href跳转会导致相关的模块顶在最顶部，导航栏会遮住他们。如果每个模块都加padding会丑而且不容易维护。

let aTags = document.querySelectorAll('nav > ul > li > a')
for(let i=0;i<aTags.length;i++){
    aTags[i].onclick = function(x){
        x.preventDefault()  /**禁止默认动作**/
        let a = x.currentTarget
        let href = a.getAttribute('href') //'#siteAbout'
        let element = document.querySelector(href)
        console.log(element)
    }
}
复制代码

此时对应关系为#＋内容 内容→ID

另外加上

    let top = element.offsetTop //获取指定元素的绝对高度
    window.scrollTo(0 , top - 70) //滚动到（指定元素的高度-70）
复制代码

要注意的：console.log(a.href)→http://192.168.206.1:8080/index.html# console.log(a.getAttribute('href'))→#

一个是被浏览器处理过的，一个是写了什么就是什么