PC端网页特效-- JS

最新推荐文章于 2024-05-30 11:27:58 发布

Gavin7835

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量462

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_48009833/article/details/122101509

版权

一、元素偏移量offset系列

1. offset概述

offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等

获得元素距离带有定位父元素的位置
获取元素自身的大小（宽度高度）
注意：返回的数值都不带单位

offset系列常用属性：

offset系列属性	作用
element.offsetParent	返回该元素带有定位的父级元素，如果父级都没有定位则返回body
element.offsetTop	返回元素相对父元素（带定位）上方的偏移
element.offsetLeft	返回元素相对父元素（带定位）左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回的数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回的数值不带单位

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            position: relative;
            margin: 100px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .son {
            position: absolute;
            top: 25px;
            left: 20px;
            width: 20px;
            height: 20px;
            background-color: blue;
        }
        .size {
            padding: 50px;
            width: 500px;
            height: 100px;
            background-color: blue;
            border: 10px solid red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="size"></div>
</body>
<script>
    //1.可以得到元素的偏移（位置），返回不带单位的数值
    let father = document.querySelector('.father');
    console.log(father.offsetTop); //输出：100
    console.log(father.offsetLeft); //输出：100
    // 它以带有定位的父级元素为准，如果没有父级或者父级没有定位，则以body为准
    let son = document.querySelector('.son');
    console.log(son.offsetTop); //输出：25
    console.log(son.offsetLeft); //输出：20
    //2.可以得到元素的大小（宽度和高度），包含padding+border+内容区域的宽高
    let size = document.querySelector('.size');
    console.log(size.offsetWidth); //100(padding)+20(border)+500(width) = 620
    console.log(size.offsetHeight); //100(padding)+20(border)+100(height) = 220
    //3.返回带有定位的父级，如果没有父级或者父级没有定位，则返回body
    console.log(son.offsetParent);
    console.log(son.parentNode); //返回最近一级的父级元素，不管父级有没有定位
</script>

2. offset和style的区别

offset可以得到任意样式表中的样式值；style只能得到行内样式表中的样式值
offset系列获得的数值是没有单位的；style.width获得的是带有单位的字符串
offsetWidth包含padding+border+width的值；style.width获得不包含padding和border的值
offsetWidth等属性是只读属性，只能获取不能赋值；style.width是可读写属性，可以获取也可以赋值
当我们想要获取元素大小位置时，使用offset更合适
当我们想要给元素更改值时，则需要使用style

3. offset的主要作用：用于获取元素位置 offsetLeft & offsetTop

二、元素可视区client系列

1. client系列介绍：

client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

2. client的主要作用：用于获取元素大小 clientWidth & clientHeight

三、元素滚动scroll系列

1. scroll系列介绍

scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回的数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回的数值不带单位
element.scrollWidth	返回自身实际内容的宽度，不含边框，返回的数值不带单位
element.scrollHeight	返回自身实际内容的高度，不含边框，返回的数值不带单位

2. scrollTop和scrollLeft ：页面被卷去的头部

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

3. scroll的主要作用：用于获取滚动距离 scrollTop & scrollLeft

注意：页面的滚动距离通过 window.pageXOffset 来获取

四、动画函数封装

五、常见网页特效案例

六、立即执行函数

立即执行函数：不需要调用，立马能够自己执行的函数

写法：(function() { }) () 或者 (function() {}())

<script>
    (function (a, b) {
        console.log(a + b);
    })(1,3); //第二个括号相当于调用函数，可以传参

    (function (a, b) {
        console.log(a + b)
    }(2,4)); 
</script>

优点：独立创建了一个作用域，里面所有的变量都是局部变量，不会有命名冲突的情况

Gavin7835

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PC端网页特效-- JS

一、元素偏移量offset系列1. offset概述offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等获得元素距离带有定位父元素的位置获取元素自身的大小（宽度高度）注意：返回的数值都不带单位offset系列常用属性：offset系列属性作用 element.offsetParent 返回该元素带有定位的父级元素，如果父级都没有定位则返回body element.offsetTop 返回元素相对父元
复制链接

扫一扫