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

摘要：个人笔记在给在线简历添加特效过程中遇到的问题及解决方法一预览页面滚动元素的事件处理函数。语法参数是一个函数的引用。事件是当窗口发生滚动得时候触发的事件返回文档在垂直方向已滚动的像素值。

github
预览

元素的 scroll 事件处理函数。
语法 element.onscroll = functionReference 参数 functionReference是一个函数的引用。
当该元素滚动时，会执行该函数。

window.onscroll事件是当窗口发生滚动得时候触发的事件

Window.scrollY返回文档在垂直方向已滚动的像素值。
MDN

点我触发点击事件

实际上点到了span上面
a.target是用户操作的
a.currentTarget是监听的
打印如下:

https://developer.mozilla.org...
下一个 兄弟子节点

let a = x.currentTarget;
            let brother = a.nextSibling;
            while (brother.nodeType === 3){
                // brother.nodeType === 3说明brother还是回车或者文字或者空格,循环到他不是为止
                brother = brother.nextSibling;
            }

或者

while (brother.tagName !== "UL"){
                // brother.nodeType === 3说明brother还是回车或者文字或者空格,循环到他不是为止
                brother = brother.nextSibling;
            }

tagName返回的是大写的标签名

let liTags = document.querySelectorAll("nav.meau > ul > li");

过不不能操控的元素有margin,display

一般用来操控:
宽高width,height
定位后的right,left等
透明度opacity
阴影box-shadow

demo预览地址
核心是transition(过渡),但是仍未解决transition对display无效的问题.
目前只做到,让其透明读变成0,近似消失.

代码:

    
    
    




    

        
            作品
        
        

            
js
            
CSS
            
啊可接受的管理会计ad佛罗伦萨放得开是龙卷风的恐惧感
        
    
    

        
            博客
        
        

            
245345345
            
346
            
啊实34534543打实大师的
        
    
    

        
            我的联系电话
        
    

a.onclick = function (x) {
            x.preventDefault();//禁止默认动作.即禁止a标签的默认锚点跳转动作
        }

aTags[i].onclick = function (x) {
            x.preventDefault();//禁止默认动作.即禁止a标签的默认锚点跳转动作
            let a = x.currentTarget;
            console.log(a.href);
           console.log( a.getAttribute("href"));

        }

a.href返回的是带域名的href的值
a.getAttribute("href")就返回href里面的值

弄清元素距离页面顶部的距离和距离视口顶部的距离:
页面顶部指的是整个网页的顶部,即随着页面的滚动,元素距离页面顶部的距离不会变化.

window.scrollX

window.scrollY是网页滚动的距离,即视口顶部距离网页顶部的距离.

为了跨浏览器兼容，请使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。

Element.getBoundingClientRect().top是元素Element距离视口顶部的距离
参考这里Element.getBoundingClientRect()

element.offsetTop是元素顶部距离网页最上层的距离

HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。

offsetTop

element.offsetTop等于Element.getBoundingClientRect().top + window.scrollX

aTags[i].onclick = function (x) {
            x.preventDefault();//禁止默认动作.即禁止a标签的默认锚点跳转动作
            let a = x.currentTarget;
            // console.log(a.href);
            let href = a.getAttribute("href")//"#siteSkills"
            let element = document.querySelector(href);

            console.log("element.getBoundingClientRect().top为:"+element.getBoundingClientRect().top);
            console.log("(window.scrollY为:"+window.scrollY);
            console.log("上面两个的和为"+(element.getBoundingClientRect().top+window.scrollY));//相加等于offsetTop
            console.log("element.offsetTop为:"+element.offsetTop)//只读属性

        }

窗口移动到相应位置(网页左上角的移动到(x,y)

document.querySelector()返回的是一个元素,

但是区别于:document.querySelectorAll("nav>ul>li>a")
返回的是数组