24-进阶：给简历加 JS（续）

一. 点击menu后，滚动到对应的页面位置，在滚动页面过程中选取适当的位移曲线，达到需求的平滑效果

• 涉及到的一些CSS知识点：

• 涉及到的一些JS知识点：

1. window.setInterval

WindowOrWorkerGlobalScope 的 setInterval()方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。
返回一个 intervalID；

本节中采用setInterval实现如下：

let aTags = document.querySelectorAll('#topNavBar nav>ul>li>a')
console.log(aTags)
for(let i = 0; i < aTags.length; i++){
    aTags[i].onclick = function(yy){
        yy.preventDefault()
        let a = yy.currentTarget
        let href = a.getAttribute('href')
        let element = document.querySelector(href)
        let top = element.offsetTop
        let targetTop = top - 80
        let n = 25;//在一次滚动过程中总的运动次数
        let t = 500;//总运动时间
        let delay = t/n
        let currentTop = window.scrollY
        let s = targetTop - currentTop
        let dy = s/n;//每一小步运动距离
        let i = 1
        let id = window.setInterval(()=>{
            if(i == n){
                window.clearInterval(id)
            }
            window.scrollTo(0,currentTop+dy*i)
            i = i + 1
        },delay)
    }
}

以上代码实现的效果中，页面的滚动是匀速的，即 Linear；

2. tween.js---采用缓动函数来实现各种速率要求的滚动效果

 // Setup the animation loop.
 function animate(time) {
    requestAnimationFrame(animate);
    TWEEN.update(time);
}
requestAnimationFrame(animate);
for(let i = 0; i < aTags.length; i++){
    aTags[i].onclick = function(yy){
        yy.preventDefault()
        let a = yy.currentTarget
        let href = a.getAttribute('href')
        let element = document.querySelector(href)
        let top = element.offsetTop
        let targetTop = top - 80
        let currentTop = window.scrollY
        let s = targetTop - currentTop
        let time =Math.abs(500*s/100)
        time = (time > 1000)?1000:time
        console.log(time)
        var coords = { y: currentTop};
        var tween = new TWEEN.Tween(coords) 
            .to({ y: targetTop }, time) 
            .easing(TWEEN.Easing.Exponential.InOut) 
            .onUpdate(function() { 
                window.scrollTo(0,coords.y)
            })
            .start();
    }
}

二. 页面滚动到某一区域时，对应该区域的顶部导航目录高亮

初步完成后的代码：

 window.onscroll = function(xx){
    let specialTags = document.querySelectorAll('[data-x]')
    let minIndex = 0
    for(let i = 0; i < specialTags.length; i++){
        if(Math.abs(specialTags[i].offsetTop - window.scrollY) < Math.abs(specialTags[minIndex].offsetTop - window.scrollY)){
            minIndex = i
        }
    }
    
    let id = specialTags[minIndex].id
    let a = document.querySelector('a[href="#'+id+'"]')
    console.log(a)
    let li = a.parentNode
    let liAndBrother = li.parentNode.children
    console.log(liAndBrother)
    for(let i = 0; i < liAndBrother.length; i++){
        liAndBrother[i].classList.remove('active')
    }
    li.classList.add('active')  //.active选择器为实现topNavBar时用到的，
}

bug调试：.active选择器为实现topNavBar时用到的，调试时发现，此时要求的高亮效果与之前 topNavBar 的动态效果不完全一样，因此利用已有 .active选择器并不合适；为了区分这两种只有部分相同的动态效果，此处另外新增一个 .highlight

• 涉及到的一些CSS知识点：

1. data-* 自定义属性

HTML 语法
语法非常简单。所有在元素上以data-开头的属性为数据属性。比如说你有一片文章，你想要存储一些没有可视化展现意义的额外信息。请使用data属性：

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

JavaScript 访问:

var article = document.querySelector('#electriccars');
 
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

CSS 访问
你同样可以在CSS中使用属性选择器根据data来改变样式：

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

• 涉及到的一些JS知识点：

1. Node.parentNode

2. Node.parentElement

3. ParentNode.children 与 Node.childNodes 的区别
   ParentNode.children---获取一个元素的所有子代标签（标签不包含文本）；
   Node.childNodes---获取一个元素的所有子代节点（包含文本）；