27 - JavaScript 特效：offset家族和匀速动画(含轮播图的实现)

最新推荐文章于 2022-05-28 20:56:46 发布

原创

最新推荐文章于 2022-05-28 20:56:46 发布 · 3.1k 阅读

标签

#offset动画

前言

JS动画的主要内容如下：

1、三大家族和一个事件对象：

三大家族：offset/scroll/client。也叫三大系列。
事件对象/event（事件被触动时，鼠标和键盘的状态）（通过属性控制）。

2、动画(闪现/匀速/缓动)

3、冒泡/兼容/封装

4、正则

offset 家族的组成

我们知道，三大家族包括：offset/scroll/client。今天来讲一下offset，以及与其相关的匀速动画。

offset的中文是：偏移，补偿，位移。

js中有一套方便的获取元素尺寸的办法就是offset家族。offset家族包括：

offsetWidth
offsetHight
offsetLeft
offsetTop
offsetParent

下面分别介绍。

1、offsetWidth 和 offsetHight

用于检测盒子自身的宽高+padding+border，不包括margin。如下：

offsetWidth = width + padding + border;
offsetHeight = Height + padding + border;

这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。

举例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
    
    
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 10px solid #000;
            margin: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

<div class="box"></div>
<script>
    var div1 = document.getElementsByTagName("div")[0];

    console.log(div1.offsetHeight);          //打印结果：140（100+20+20）
    console.log(typeof div1.offsetHeight);   //打印结果：number

</script>
</body>
</html>

2、offsetLeft 和 offsetTop

返回距离上级盒子（带有定位）左边的位置；如果父级都没有定位，则以body为准。

offsetLeft：从父亲的 padding 开始算，父亲的 border 不算。

举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box1 {
    
    
            width: 300px;
            height: 300px;
            padding: 100px;
            margin: 100px;
            position: relative;
            border: 100px solid #000;
            background-color: pink;
        }

        .box2 {
    
    
            width: 100px;
            height: 100px;
            background-color: red;
            /*position: absolute;*/
            /*left: 10px;*/
            /*top: 10px;*/
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2" style="left: 10px"></div>
</div>

<script>

    var box2 = document.getElementsByClassName("box2")[0];

    //offsetTop和offsetLeft
    console.log(box2.offsetLeft);  //100
    console.log(box2.style.left);  //10px


</script>

</body>
</html>

在父盒子有定位的情况下，offsetLeft == style.left(去掉px之后)。注意，后者只识别行内样式。但区别不仅仅于此，后面会讲。

3、offsetParent

检测父系盒子中带有定位的父盒子节点。返回结果是该对象的父级（带有定位）。

如果当前元素的父级元素，没有CSS定位（position为absolute、relative、fixed），那么offsetParent的返回结果为body。
如果当前元素的父级元素，有CSS定位（position为absolute、relative、fixed），那么offsetParent的返回结果为最近的那个父级元素。

举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box1" style="position: absolute;">
    <div class="box2" style="position: fixed;">
        <div class="box3"></div>
    </div>
</div>
<script>
    //offsetParent：复习盒子中带有定位的盒子
    //复习盒子中都没有定位，返回body
    //如果有，谁有返回最近哪个

    var box3 = document.getElementsByClassName("box3")[0];

    console.