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

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 到數組里