专栏首页Vincent-yuan前端学习(49)~offset相关属性和匀速动画(含轮播图实现)

前端学习(49)~offset相关属性和匀速动画(含轮播图实现)

JS动画的主要内容如下:

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

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

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

3、冒泡/兼容/封装

offset 家族的组成

今天来讲一下offset,以及与其相关的匀速动画。

offset的中文是:偏移,补偿,位移。

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

  • offsetWidth
  • offsetHight
  • offsetLeft
  • offsetTop
  • offsetParent

下面分别介绍。

1、offsetWidth 和 offsetHight

offsetWidthoffsetHight:获取元素的宽高 + 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、offsetParent

offsetParent:获取当前元素的定位父元素。

  • 如果当前元素的父元素,有CSS定位(position为absolute、relative、fixed),那么 offsetParent 获取的是最近的那个父元素。
  • 如果当前元素的父元素,没有CSS定位(position为absolute、relative、fixed),那么offsetParent 获取的是body。

举例:

<!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>

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

    console.log(box3.offsetParent);
</script>
</body>
</html>

打印结果:

3、offsetLeft 和 offsetTop

offsetLeft:当前元素相对于其定位父元素的水平偏移量。

offsetTop:当前元素相对于其定位父元素的垂直偏移量。

备注:从父亲的 padding 开始算起,父亲的 border 不算在内。

举例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            padding: 100px;
            margin: 10px;
            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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端学习(13)~css学习(七):浮动

    上图中可以看到,h1标签是块级元素,占据了整行,span标签是行内元素,只占据内容这一部分。

    Vincent-yuan
  • 前端学习(16)~css3属性学习(十)

    text-shadow 可以设置多个阴影,每个阴影之间使用逗号隔开。我们来看个例子。

    Vincent-yuan
  • 前端学习(8)~css学习(二):背景属性

    光学显示器中,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色的。r、g、b的值,每个值的取值范围0~255,一共256个值。

    Vincent-yuan
  • css菜鸡的自我救赎0. 前言1. 一些实践方案深入浅出2. 开始试试水

    我们看百度搜索的顶部,顶部的#head(搜索框这一行都是)是fixed的,紧接着的那个div是一个tab。当然fixed脱离文本流,就用padding把自己的主...

    lhyt
  • 前端基础-CSS缩放zoom

    cwl_java
  • css菜鸡的自我救赎

    我们看百度搜索的顶部,顶部的#head(搜索框这一行都是)是fixed的,紧接着的那个div是一个tab。当然fixed脱离文本流,就用padding把自己的主...

    IMWeb前端团队
  • BFC概念和作用,触发条件

    windseek
  • css的position定位详解

    iii.  父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白

    十月梦想
  • [Java小工匠]CSS盒子模型-边距合并

      CSS外边距合并,只有上外边距和下外边距才会触发外边距合并,左外边距和右外边距不会。

    Java小工匠
  • css 使元素居中

    <div style="text-align:center;">居中显示</div>

    lin_zone

扫码关注云+社区

领取腾讯云代金券