PC端网页特效

2022-07-28 113 阅读1分钟

1. 元素偏移量 offset 系列

使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等

//  offsetParent返回带有定位的父亲 否则返回的是body
console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位

想获取元素大小位置，用offset
给元素更改值，用style改变

2. 元素可视区 client 系列

获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

立即执行函数: 不需要调用，立马能够自己执行的函数
写法可以传递参数进来

(function() {})()
(function(){}());

立即执行函数的作用：创建了独立作用域, 里面所有的变量都是局部变量，避免命名冲突

      (function (a, b) {
        console.log(a + b);
        var num = 10;
      })(1, 2); // 第二个小括号可以看做是调用函数
      
      (function sum(a, b) {
        console.log(a + b);
        var num = 10; // 局部变量
      })(2, 3);

3. 元素滚动 scroll 系列

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。

三大系列总结

offset系列经常用于获得元素位置 offsetLeft offsetTop
client 经常用于获取元素大小 clientWidth clientHeight
scroll 经常用于获取滚动距离 scrollTop scrollLeft
注意页面滚动的距离通过 window.pageXOffset 获得