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

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

点击菜单滚动动画首页

 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库(缓动动画)

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>

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 <liBrotherAndMe.length ; i++) {
            liBrotherAndMe[i].classList.remove('active');
        }
        li.classList.add('active');

知识点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总结

一些题目

[多选]如何获取一个元素的爸爸节点：
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 到数组里

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