摘要：個(gè)人筆記在給在線簡歷添加特效過程中遇到的問題及解決方法二預(yù)覽點(diǎn)擊菜單滾動(dòng)動(dòng)畫首頁目標(biāo)位置當(dāng)作終點(diǎn)坐標(biāo)當(dāng)前滾動(dòng)到的距離當(dāng)做起點(diǎn)是步數(shù)分步是每次重復(fù)都加的變量既要清除又要毫秒除以幀就是每走一步的時(shí)間庫緩動(dòng)動(dòng)畫緩動(dòng)函數(shù)速查表庫搜索引入一個(gè)網(wǎng)站

github
預(yù)覽

 let top = element.offsetTop;

            let targetTop = top-80;//目標(biāo)位置,當(dāng)作終點(diǎn)坐標(biāo)
            let currentTop = window.scrollY;//當(dāng)前windows滾動(dòng)到的距離,當(dāng)做起點(diǎn)
            let n = 50;//n是步數(shù)
            let step = (targetTop-currentTop)/n;//分25步
            let i = 0;//i是每次重復(fù)都加1的變量
            let meauscroll = setInterval(() =>{
                if(i===n){
                    window.clearInterval(meauscroll);
                    return;//既要清除,又要return
                }
                i++;//
                window.scrollTo(0,currentTop+step*i)
            },500/n)//500毫秒除以25幀,就是每走一步的時(shí)間

緩動(dòng)函數(shù)速查表
tween.js庫GitHub
cdnjs搜索tween
引入

tween.js一個(gè)網(wǎng)站的教程

基本使用指南

let targetTop = top-80;//目標(biāo)位置,當(dāng)作終點(diǎn)坐標(biāo)
            let currentTop = window.scrollY;//當(dāng)前windows滾動(dòng)到的距離,當(dāng)做起點(diǎn)

            let s = targetTop-currentTop;//距離
            let t =Math.abs(s)/100*100 ; //每100像素用100毫秒來走,這樣時(shí)間就不是固定的,是
            t>500 ? 500:t;//t如果大于500毫秒,就強(qiáng)制他變成500,防止移動(dòng)距離過長過慢
            ///tween.js
            function animate(time) {
                requestAnimationFrame(animate);
                TWEEN.update(time);
            }
            requestAnimationFrame(animate);//上面這段代碼是瀏覽器用來根據(jù)電腦不同性能不同,限定動(dòng)畫的幀數(shù)的.幀數(shù)不是自己定的,是瀏覽器自動(dòng)生成的

            var coords = { x: currentTop };//起始位置
            var tween = new TWEEN.Tween(coords)
                .to({ x: targetTop }, t)//目標(biāo)位置
                .easing(TWEEN.Easing.Quintic.Out)//動(dòng)畫類型
                .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 自動(dòng)高亮個(gè)導(dǎo)航
        let specialArr = document.querySelectorAll("[data-x]");//選擇全部屬性為data-x的標(biāo)簽
        let minIndex = 0;
        for (let i = 1; i < specialArr.length; i++) {//循環(huán)找出offsetTop和ScrollY之間距離最小的標(biāo)簽的下標(biāo).
            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的那個(gè)a
        // console.log(document.querySelector("a[href = "#siteSkills"]"))
        let li = aTarget.parentNode;
        // console.log(li);
        let liBrotherAndMe = li.parentNode.children;//選擇兄弟和自己的結(jié)點(diǎn)
        for (let i = 0; i 
知識(shí)點(diǎn)1
let specialArr = document.querySelectorAll("[data-x]");//選擇全部屬性為data-x的標(biāo)簽
document.querySelector("a[href="#" + minid + ""]");//找到href為id的那個(gè)a
選擇器的使用,使用屬性選擇
知識(shí)點(diǎn)2
[data-x].active{
    outline: 10px solid red;
}
[data-x].active表示屬性為data-x且擁有acticve的class的標(biāo)簽的包圍線為10px solid red
解決一個(gè)BUG
因?yàn)楦吡敛藛魏鸵苿?dòng)到菜單上又移出來用的同一個(gè)類名active所以會(huì)有沖突,相當(dāng)于做高亮動(dòng)作的時(shí)候,顯示的是鼠標(biāo)做移動(dòng)出時(shí)的動(dòng)作.所以多帶帶給高亮子菜單一個(gè)動(dòng)作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 ;
}
添加垂直偏移動(dòng)畫
添加向上偏移緩動(dòng)動(dòng)畫,當(dāng)進(jìn)入頁面時(shí)usercard偏移一次,然后移到相應(yīng)的位置偏移一次
原理,開始都加上offsetclass,當(dāng)移動(dòng)到位置的時(shí)候,去掉offset屬性即可.
[data-x]{
    transform: translateY(0);
    transition: all 1s ease;
}
[data-x].offset{
    transform: translateY(300px);
}
需要注意的點(diǎn),offset必須直接加載html里,用js加的話,transition過渡動(dòng)畫打開后也會(huì)執(zhí)行一次,打開頁面就會(huì)往后退.意思就是剛開始是不偏移的,加了js后開始偏移了.這也要過渡.
然后在最小的minindex那里
// 添加每次出現(xiàn)都往上偏移動(dòng)畫
            specialArr[minIndex].classList.remove("offset");
需要注意的是,如果要實(shí)現(xiàn)最開始usercard打開頁面就向上便宜的話,需要把里面的寫成函數(shù),然后再打開頁面就執(zhí)行一遍,然后再在window.onscroll里執(zhí)行
        hightLightAndOffetToUp();//先執(zhí)行一次,以便usercard可以砸打開頁面的時(shí)候就進(jìn)行向上偏移
        
        window.onscroll = function () {
            if(window.scrollY > 0){
                topNavBar.classList.add("sticky");
            }else {
                topNavBar.classList.remove("sticky")
            }
            hightLightAndOffetToUp();
        }
        function hightLightAndOffetToUp() {//自動(dòng)高亮個(gè)導(dǎo)航和向上偏移函數(shù)代碼...}
           
progress進(jìn)度條動(dòng)畫
思想:還是使用CSS過渡transition動(dòng)畫
section.skill .progressBar{
    overflow: hidden;
}
section.skill .progress{
    transform: translateX(0);
    transition: all 1.8s ease;
}
section.skill.offset .progress{
    transform: translateX(-100%);
}
當(dāng)section.skill.offset .progress的含義是
當(dāng)section且class為skill且為fooset時(shí),.progress就向左偏移100%,section.skill .progress的含義為,當(dāng)去掉offset時(shí),偏移為0,且這個(gè)變化要執(zhí)行transition過渡動(dòng)畫
父元素,progressBar要設(shè)置overflow: hidden;以便來隱藏進(jìn)度條的偏移.
操作DOM常用API總結(jié)
操作DOM常用API總結(jié)
一些題目
[多選]如何獲取一個(gè)元素的爸爸節(jié)點(diǎn)：
var divParent = div._?_
如果不知道，請(qǐng)搜索 MDN parent
A. parentNode
 B. parentElement
如何檢測一個(gè)元素是文字還是標(biāo)簽？
var isElement = div.__?__  === 1
如果不知道，請(qǐng)搜索 MDN node type
nodeType
如何獲取一個(gè)元素的所有子代標(biāo)簽（標(biāo)簽不包含文本）
let children = div.____?____
此處填什么？
如果不會(huì)就搜索 MDN children
A. children
如何獲取一個(gè)元素的所有子代節(jié)點(diǎn)（節(jié)點(diǎn)包括標(biāo)簽和文字）
let children = div.____?____
此處填什么？
如果不會(huì)就搜索 MDN children
childNodes
如何獲取一個(gè)div標(biāo)簽的下一個(gè)標(biāo)簽？
B. div.nextSibling 獲取的有可能是文字，需要不停訪問 nextSibling 直到獲取到一個(gè) nodeType 為 1 的節(jié)點(diǎn)才行
如何獲取一個(gè)div標(biāo)簽的所有同級(jí)（兄弟）標(biāo)簽？
C. 聲明空數(shù)組 siblings，遍歷 div.parentNode.children，將 div 以外的元素 push 到數(shù)組里