(个人笔记)在给在线简历添加js特效过程中遇到的问题及解决方法 二

摘要：个人笔记在给在线简历添加特效过程中遇到的问题及解决方法二预览点击菜单滚动动画首页目标位置当作终点坐标当前滚动到的距离当做起点是步数分步是每次重复都加的变量既要清除又要毫秒除以帧就是每走一步的时间库缓动动画缓动函数速查表库搜索引入一个网站

github
预览

 let top = element.offsetTop;

            let targetTop = top-80;//目标位置,当作终点坐标
            let currentTop = window.scrollY;//当前windows滚动到的距离,当做起点
            let n = 50;//n是步数
            let step = (targetTop-currentTop)/n;//分25步
            let i = 0;//i是每次重复都加1的变量
            let meauscroll = setInterval(() =>{
                if(i===n){
                    window.clearInterval(meauscroll);
                    return;//既要清除,又要return
                }
                i++;//
                window.scrollTo(0,currentTop+step*i)
            },500/n)//500毫秒除以25帧,就是每走一步的时间

缓动函数速查表
tween.js库GitHub
cdnjs搜索tween
引入

tween.js一个网站的教程

基本使用指南

let targetTop = top-80;//目标位置,当作终点坐标
            let currentTop = window.scrollY;//当前windows滚动到的距离,当做起点

            let s = targetTop-currentTop;//距离
            let t =Math.abs(s)/100*100 ; //每100像素用100毫秒来走,这样时间就不是固定的,是
            t>500 ? 500:t;//t如果大于500毫秒,就强制他变成500,防止移动距离过长过慢
            ///tween.js
            function animate(time) {
                requestAnimationFrame(animate);
                TWEEN.update(time);
            }
            requestAnimationFrame(animate);//上面这段代码是浏览器用来根据电脑不同性能不同,限定动画的帧数的.帧数不是自己定的,是浏览器自动生成的

            var coords = { x: currentTop };//起始位置
            var tween = new TWEEN.Tween(coords)
                .to({ x: targetTop }, t)//目标位置
                .easing(TWEEN.Easing.Quintic.Out)//动画类型
                .onUpdate(function() {
                    window.scrollTo(0,coords.x);//每次更新的变量要附在什么上面
                })
                .start(); 

张鑫旭的文章如何使用tween.js,且衍生了自己的animation.js简单用法

张鑫旭基本使用指南:

div1.onclick = function () {

        Math.animation(0, 800, function (value) {
            div1.style.left =  value + "px";
        }, "Bounce.easeInOut", 600);
    }

//auto height light navbar 自动高亮个导航
        let specialArr = document.querySelectorAll("[data-x]");//选择全部属性为data-x的标签
        let minIndex = 0;
        for (let i = 1; i < specialArr.length; i++) {//循环找出offsetTop和ScrollY之间距离最小的标签的下标.
            if(Math.abs(specialArr[i].offsetTop-window.scrollY) < Math.abs(specialArr[minIndex].offsetTop-window.scrollY)){
                minIndex = i;
            }
        }
        // console.log(specialArr[minIndex]);
        for (let i = 0; i < specialArr.length; i++) {
            specialArr[i].classList.remove("active");
        }
        specialArr[minIndex].classList.add("active");

        let minid =   specialArr[minIndex].id;//取到id
        // console.log(minid);
        let aTarget = document.querySelector("a[href="#" + minid + ""]");//找到href为id的那个a
        // console.log(document.querySelector("a[href = "#siteSkills"]"))
        let li = aTarget.parentNode;
        // console.log(li);
        let liBrotherAndMe = li.parentNode.children;//选择兄弟和自己的结点
        for (let i = 0; i 
知识点1
let specialArr = document.querySelectorAll("[data-x]");//选择全部属性为data-x的标签
document.querySelector("a[href="#" + minid + ""]");//找到href为id的那个a
选择器的使用,使用属性选择
知识点2
[data-x].active{
    outline: 10px solid red;
}
[data-x].active表示属性为data-x且拥有acticve的class的标签的包围线为10px solid red
解决一个BUG
因为高亮菜单和移动到菜单上又移出来用的同一个类名active所以会有冲突,相当于做高亮动作的时候,显示的是鼠标做移动出时的动作.所以多带带给高亮子菜单一个动作highLightActive
具体做法是,将js中添加active的class改成highLightActive
并将CSS代码改变,在选择器上面添加一行
.topNavBar nav>ul>li.active>a::after,
.topNavBar nav>ul>li.highLightActive>a::after/*这里是添加的*/{

    opacity: 1;
    animation: meauBottomSlide 0.5s ;
}
添加垂直偏移动画
添加向上偏移缓动动画,当进入页面时usercard偏移一次,然后移到相应的位置偏移一次
原理,开始都加上offsetclass,当移动到位置的时候,去掉offset属性即可.
[data-x]{
    transform: translateY(0);
    transition: all 1s ease;
}
[data-x].offset{
    transform: translateY(300px);
}
需要注意的点,offset必须直接加载html里,用js加的话,transition过渡动画打开后也会执行一次,打开页面就会往后退.意思就是刚开始是不偏移的,加了js后开始偏移了.这也要过渡.
然后在最小的minindex那里
// 添加每次出现都往上偏移动画
            specialArr[minIndex].classList.remove("offset");
需要注意的是,如果要实现最开始usercard打开页面就向上便宜的话,需要把里面的写成函数,然后再打开页面就执行一遍,然后再在window.onscroll里执行
        hightLightAndOffetToUp();//先执行一次,以便usercard可以砸打开页面的时候就进行向上偏移
        
        window.onscroll = function () {
            if(window.scrollY > 0){
                topNavBar.classList.add("sticky");
            }else {
                topNavBar.classList.remove("sticky")
            }
            hightLightAndOffetToUp();
        }
        function hightLightAndOffetToUp() {//自动高亮个导航和向上偏移函数代码...}
           
progress进度条动画
思想:还是使用CSS过渡transition动画
section.skill .progressBar{
    overflow: hidden;
}
section.skill .progress{
    transform: translateX(0);
    transition: all 1.8s ease;
}
section.skill.offset .progress{
    transform: translateX(-100%);
}
当section.skill.offset .progress的含义是
当section且class为skill且为fooset时,.progress就向左偏移100%,section.skill .progress的含义为,当去掉offset时,偏移为0,且这个变化要执行transition过渡动画
父元素,progressBar要设置overflow: hidden;以便来隐藏进度条的偏移.
操作DOM常用API总结
操作DOM常用API总结
一些题目
[多选]如何获取一个元素的爸爸节点：
var divParent = div._?_
如果不知道，请搜索 MDN parent
A. parentNode
 B. parentElement
如何检测一个元素是文字还是标签？
var isElement = div.__?__  === 1
如果不知道，请搜索 MDN node type
nodeType
如何获取一个元素的所有子代标签（标签不包含文本）
let children = div.____?____
此处填什么？
如果不会就搜索 MDN children
A. children
如何获取一个元素的所有子代节点（节点包括标签和文字）
let children = div.____?____
此处填什么？
如果不会就搜索 MDN children
childNodes
如何获取一个div标签的下一个标签？
B. div.nextSibling 获取的有可能是文字，需要不停访问 nextSibling 直到获取到一个 nodeType 为 1 的节点才行
如何获取一个div标签的所有同级（兄弟）标签？
C. 声明空数组 siblings，遍历 div.parentNode.children，将 div 以外的元素 push 到数组里