36-offset相关属性和匀速动画（含轮播图的实现）

前言

JS动画的主要内容如下：

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

  • 三大家族：offset/scroll/client。也叫三大系列。

  • 事件对象/event（事件被触动时，鼠标和键盘的状态）（通过属性控制）。

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

3、冒泡/兼容/封装

offset 家族的组成

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

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

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

  • offsetWidth

  • offsetHight

  • offsetLeft

  • offsetTop

  • offsetParent

下面分别介绍。

1、offsetWidth 和 offsetHight

offsetWidth 和 offsetHight：获取元素的宽高 + padding + border，不包括margin。如下：

  • offsetWidth = width + padding + border

  • offsetHeight = Height + padding + border

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

举例如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             width: 100px;
  9.             height: 100px;
  10.             padding: 10px;
  11.             border: 10px solid #000;
  12.             margin: 100px;
  13.             background-color: pink;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  19. <div class="box"></div>
  20. <script>
  21.     var div1 = document.getElementsByTagName("div")[0];
  23.     console.log(div1.offsetHeight);          //打印结果：140（100+20+20）
  24.     console.log(typeof div1.offsetHeight);   //打印结果：number
  26. </script>
  27. </body>
  28. </html>

2、offsetParent

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

  • 如果当前元素的父元素，有CSS定位（position为absolute、relative、fixed），那么 offsetParent 获取的是最近的那个父元素。

  • 如果当前元素的父元素，没有CSS定位（position为absolute、relative、fixed），那么offsetParent 获取的是body。

举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <div class="box1" style="position: absolute;">
  9.     <div class="box2" style="position: fixed;">
  10.         <div class="box3"></div>
  11.     </div>
  12. </div>
  13. <script>
  15.     var box3 = document.getElementsByClassName("box3")[0];
  17.     console.log(box3.offsetParent);
  18. </script>
  19. </body>
  20. </html>

打印结果：

47-offset相关属性和匀速动画（含轮播图的实现） - 图1

3、offsetLeft 和 offsetTop

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

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

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

举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .box1 {
  8.             width: 300px;
  9.             height: 300px;
  10.             padding: 100px;
  11.             margin: 100px;
  12.             position: relative;
  13.             border: 100px solid #000;
  14.             background-color: pink;
  15.         }
  17.         .box2 {
  18.             width: 100px;
  19.             height: 100px;
  20.             background-color: red;
  21.             /*position: absolute;*/
  22.             /*left: 10px;*/
  23.             /*top: 10px;*/
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28. <div class="box1">
  29.     <div class="box2" style="left: 10px"></div>
  30. </div>
  32. <script>
  34.     var box2 = document.getElementsByClassName("box2")[0];
  36.     //offsetTop和offsetLeft
  37.     console.log(box2.offsetLeft);  //100
  38.     console.log(box2.style.left);  //10px
  41. </script>
  43. </body>
  44. </html>

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

offsetLeft 和 style.left 区别

（1）最大区别在于：

offsetLeft 可以返回无定位父元素的偏移量。如果父元素中都没有定位，则body为准。

style.left 只能获取行内样式，如果父元素中都没有设置定位，则返回””（意思是，返回空字符串）;

（2）offsetTop 返回的是数字，而 style.top 返回的是字符串，而且还带有单位：px。

比如：

  2. div.offsetLeft = 100;
  3. div.style.left = "100px";

（3）offsetLeft 和 offsetTop 只读，而 style.left 和 style.top 可读写（只读是获取值，可写是修改值）

总结：我们一般的做法是：用offsetLeft 和 offsetTop 获取值，用style.left 和 style.top 赋值（比较方便）。理由如下：

  • style.left：只能获取行内式，获取的值可能为空，容易出现NaN。

  • offsetLeft：获取值特别方便，而且是现成的number，方便计算。它是只读的，不能赋值。

动画的种类

  • 闪现（基本不用）

  • 匀速（本文重点）

  • 缓动（后续重点）

简单举例如下：（每间隔500ms，向右移动盒子100px）

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: pink;
  11.             position: absolute;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16. <button>动画</button>
  17. <div class="box" style="left: 0px"></div>
  19. <script>
  20.     var btn = document.getElementsByTagName("button")[0];
  21.     var div = document.getElementsByTagName("div")[0];
  23.     //1、闪动
  24.     //    btn.onclick = function () {
  25.     //        div.style.left = "500px";
  26.     //    }
  28.     //2、匀速运动
  29.     btn.onclick = function () {
  30.         //定时器，每隔一定的时间向右走一些
  31.         setInterval(function () {
  32.             console.log(parseInt(div.style.left));
  33.             //动画原理： 盒子未来的位置 = 盒子现在的位置 + 步长；
  34.             //方法1：用offsetLeft获取值，用style.left赋值。
  35.             div.style.left = div.offsetLeft + 100 + 'px';
  37.             // 方法2：必须一开始就在DOM节点上添加 style="left: 0px;"属性，才能用方法2。否则， div.style.left 的值为 NaN
  38.             // div.style.left = parseInt(div.style.left)+100+"px";  //方法2：
  39.         }, 500);
  40.     };
  41. </script>
  42. </body>
  43. </html>

效果如下：

47-offset相关属性和匀速动画（含轮播图的实现） - 图2

匀速动画的封装：每间隔30ms，移动盒子10px【重要】

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .box1 {
  8.             margin: 0;
  9.             padding: 5px;
  10.             height: 300px;
  11.             background-color: #ddd;
  12.             position: relative;
  13.         }
  15.         button {
  16.             margin: 5px;
  17.         }
  19.         .box2 {
  20.             width: 100px;
  21.             height: 100px;
  22.             background-color: red;
  23.             position: absolute;
  24.             left: 195px;
  25.             top: 40px;
  26.         }
  28.         .box3 {
  29.             width: 100px;
  30.             height: 100px;
  31.             background-color: yellow;
  32.             position: absolute;
  33.             left: 0;
  34.             top: 150px;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39. <div class="box1">
  40.     <button>运动到 left = 200px</button>
  41.     <button>运动到 left = 400px</button>
  42.     <div class="box2"></div>
  43.     <div class="box3"></div>
  44. </div>
  46. <script>
  47.     var btnArr = document.getElementsByTagName("button");
  48.     var box2 = document.getElementsByClassName("box2")[0];
  49.     var box3 = document.getElementsByClassName("box3")[0];
  51.     //绑定事件
  52.     btnArr[0].onclick = function () {
  53.         //如果有一天我们要传递另外一个盒子，那么我们的方法就不好用了
  54.         //所以我们要增加第二个参数，被移动的盒子本身。
  55.         animate(box2, 200);
  56.         animate(box3, 200);
  57.     }
  59.     btnArr[1].onclick = function () {
  60.         animate(box2, 400);
  61.         animate(box3, 400);
  62.     }
  64.     //【重要】方法的封装：每间隔30ms，将盒子向右移动10px
  65.     function animate(ele, target) {
  66.         //要用定时器，先清除定时器
  67.         //一个盒子只能有一个定时器，这样的话，不会和其他盒子出现定时器冲突
  68.         //我们可以把定时器本身，当成为盒子的一个属性
  69.         clearInterval(ele.timer);
  70.         //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
  71.         //目标值如果大于当前值取正，目标值如果小于当前值取负
  72.         var speed = target > ele.offsetLeft ? 10 : -10;  //speed指的是步长
  73.         ele.timer = setInterval(function () {
  74.             //在执行之前就获取当前值和目标值之差
  75.             var val = target - ele.offsetLeft;
  76.             ele.style.left = ele.offsetLeft + speed + "px";
  77.             //移动的过程中，如果目标值和当前值之差如果小于步长，那么就不能在前进了
  78.             //因为步长有正有负，所有转换成绝对值来比较
  79.             if (Math.abs(val) < Math.abs(speed)) {
  80.                 ele.style.left = target + "px";
  81.                 clearInterval(ele.timer);
  82.             }
  83.         }, 30)
  84.     }
  85. </script>
  86. </body>
  87. </html>

实现的效果：

47-offset相关属性和匀速动画（含轮播图的实现） - 图3

上方代码中的方法封装，可以作为一个模板步骤，要记住。其实，这个封装的方法，写成下面这样，会更严谨，更容易理解：（将if语句进行了改进）

  1.     //【重要】方法的封装：每间隔30ms，将盒子向右移动10px
  2.     function animate(ele, target) {
  3.         //要用定时器，先清除定时器
  4.         //一个盒子只能有一个定时器，这样的话，不会和其他盒子出现定时器冲突
  5.         //我们可以把定时器本身，当成为盒子的一个属性
  6.         clearInterval(ele.timer);
  7.         //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
  8.         //目标值如果大于当前值取正，目标值如果小于当前值取负
  9.         var speed = target > ele.offsetLeft ? 10 : -10;  //speed指的是步长
  10.         ele.timer = setInterval(function () {
  11.             //在执行之前就获取当前值和目标值之差
  12.             var val = target - ele.offsetLeft;
  14.             //移动的过程中，如果目标值和当前值之差如果小于步长，那么就不能在前进了
  15.             //因为步长有正有负，所有转换成绝对值来比较
  16.             if (Math.abs(val) < Math.abs(speed)) {  //如果val小于步长，则直接到达目的地；否则，每次移动一个步长
  17.                 ele.style.left = target + "px";
  18.                 clearInterval(ele.timer);
  19.             } else {
  20.                 ele.style.left = ele.offsetLeft + speed + "px";
  21.             }
  22.         }, 30)
  23.     }

代码举例：轮播图的实现

完整版代码如下：（注释已经比较详细）

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title>无标题文档</title>
  6.     <style type="text/css">
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.             list-style: none;
  11.             border: 0;
  12.         }
  14.         .all {
  15.             width: 500px;
  16.             height: 200px;
  17.             padding: 7px;
  18.             border: 1px solid #ccc;
  19.             margin: 100px auto;
  20.             position: relative;
  21.         }
  23.         .screen {
  24.             width: 500px;
  25.             height: 200px;
  26.             overflow: hidden;
  27.             position: relative;
  28.         }
  30.         .screen li {
  31.             width: 500px;
  32.             height: 200px;
  33.             overflow: hidden;
  34.             float: left;
  35.         }
  37.         .screen ul {
  38.             position: absolute;
  39.             left: 0;
  40.             top: 0px;
  41.             width: 3000px;
  42.         }
  44.         .all ol {
  45.             position: absolute;
  46.             right: 10px;
  47.             bottom: 10px;
  48.             line-height: 20px;
  49.             text-align: center;
  50.         }
  52.         .all ol li {
  53.             float: left;
  54.             width: 20px;
  55.             height: 20px;
  56.             background: #fff;
  57.             border: 1px solid #ccc;
  58.             margin-left: 10px;
  59.             cursor: pointer;
  60.         }
  62.         .all ol li.current {
  63.             background: yellow;
  64.         }
  66.         #arr {
  67.             display: none;
  68.         }
  70.         #arr span {
  71.             width: 40px;
  72.             height: 40px;
  73.             position: absolute;
  74.             left: 5px;
  75.             top: 50%;
  76.             margin-top: -20px;
  77.             background: #000;
  78.             cursor: pointer;
  79.             line-height: 40px;
  80.             text-align: center;
  81.             font-weight: bold;
  82.             font-family: '黑体';
  83.             font-size: 30px;
  84.             color: #fff;
  85.             opacity: 0.3;
  86.             border: 1px solid #fff;
  87.         }
  89.         #arr #right {
  90.             right: 5px;
  91.             left: auto;
  92.         }
  93.     </style>
  95.     <script>
  96.         window.onload = function () {
  98.             //需求：无缝滚动。
  99.             //思路：赋值第一张图片放到ul的最后，然后当图片切换到第五张的时候
  100.             //     直接切换第六章，再次从第一张切换到第二张的时候先瞬间切换到
  101.             //     第一张图片，然后滑动到第二张
  102.             //步骤：
  103.             //1.获取事件源及相关元素。（老三步）
  104.             //2.复制第一张图片所在的li,添加到ul的最后面。
  105.             //3.给ol中添加li，ul中的个数-1个，并点亮第一个按钮。
  106.             //4.鼠标放到ol的li上切换图片
  107.             //5.添加定时器
  108.             //6.左右切换图片（鼠标放上去隐藏，移开显示）
  111.             //1.获取事件源及相关元素。（老三步）
  112.             var all = document.getElementById("all");
  113.             var screen = all.firstElementChild || all.firstChild;
  114.             var imgWidth = screen.offsetWidth;
  115.             var ul = screen.firstElementChild || screen.firstChild;
  116.             var ol = screen.children[1];
  117.             var div = screen.lastElementChild || screen.lastChild;
  118.             var spanArr = div.children;
  120.             //2.复制第一张图片所在的li,添加到ul的最后面。
  121.             var ulNewLi = ul.children[0].cloneNode(true);
  122.             ul.appendChild(ulNewLi);
  123.             //3.给ol中添加li，ul中的个数-1个，并点亮第一个按钮。
  124.             for (var i = 0; i < ul.children.length - 1; i++) {
  125.                 var olNewLi = document.createElement("li");
  126.                 olNewLi.innerHTML = i + 1;
  127.                 ol.appendChild(olNewLi)
  128.             }
  129.             var olLiArr = ol.children;
  130.             olLiArr[0].className = "current";
  132.             //4.鼠标放到ol的li上切换图片
  133.             for (var i = 0; i < olLiArr.length; i++) {
  134.                 //自定义属性，把索引值绑定到元素的index属性上
  135.                 olLiArr[i].index = i;
  136.                 olLiArr[i].onmouseover = function () {
  137.                     //排他思想
  138.                     for (var j = 0; j < olLiArr.length; j++) {
  139.                         olLiArr[j].className = "";
  140.                     }
  141.                     this.className = "current";
  142.                     //鼠标放到小的方块上的时候索引值和key以及square同步
  143. //                    key = this.index;
  144. //                    square = this.index;
  145.                     key = square = this.index;
  146.                     //移动盒子
  147.                     animate(ul, -this.index * imgWidth);
  148.                 }
  149.             }
  151.             //5.添加定时器
  152.             var timer = setInterval(autoPlay, 1000);
  154.             //固定向右切换图片
  155.             //两个定时器（一个记录图片，一个记录小方块）
  156.             var key = 0;
  157.             var square = 0;
  159.             function autoPlay() {
  160.                 //通过控制key的自增来模拟图片的索引值，然后移动ul
  161.                 key++;
  162.                 if (key > olLiArr.length) {
  163.                     //图片已经滑动到最后一张，接下来，跳转到第一张，然后在滑动到第二张
  164.                     ul.style.left = 0;
  165.                     key = 1;
  166.                 }
  167.                 animate(ul, -key * imgWidth);
  168.                 //通过控制square的自增来模拟小方块的索引值，然后点亮盒子
  169.                 //排他思想做小方块
  170.                 square++;
  171.                 if (square > olLiArr.length - 1) {//索引值不能大于等于5，如果等于5，立刻变为0；
  172.                     square = 0;
  173.                 }
  174.                 for (var i = 0; i < olLiArr.length; i++) {
  175.                     olLiArr[i].className = "";
  176.                 }
  177.                 olLiArr[square].className = "current";
  178.             }
  180.             //鼠标放上去清除定时器，移开后在开启定时器
  181.             all.onmouseover = function () {
  182.                 div.style.display = "block";
  183.                 clearInterval(timer);
  184.             }
  185.             all.onmouseout = function () {
  186.                 div.style.display = "none";
  187.                 timer = setInterval(autoPlay, 1000);
  188.             }
  190.             //6.左右切换图片（鼠标放上去显示，移开隐藏）
  191.             spanArr[0].onclick = function () {
  192.                 //通过控制key的自增来模拟图片的索引值，然后移动ul
  193.                 key--;
  194.                 if (key < 0) {
  195.                     //先移动到最后一张，然后key的值取之前一张的索引值，然后在向前移动
  196.                     ul.style.left = -imgWidth * (olLiArr.length) + "px";
  197.                     key = olLiArr.length - 1;
  198.                 }
  199.                 animate(ul, -key * imgWidth);
  200.                 //通过控制square的自增来模拟小方块的索引值，然后点亮盒子
  201.                 //排他思想做小方块
  202.                 square--;
  203.                 if (square < 0) {//索引值不能大于等于5，如果等于5，立刻变为0；
  204.                     square = olLiArr.length - 1;
  205.                 }
  206.                 for (var i = 0; i < olLiArr.length; i++) {
  207.                     olLiArr[i].className = "";
  208.                 }
  209.                 olLiArr[square].className = "current";
  210.             }
  211.             spanArr[1].onclick = function () {
  212.                 //右侧的和定时器一模一样
  213.                 autoPlay();
  214.             }
  217.             function animate(ele, target) {
  218.                 clearInterval(ele.timer);
  219.                 var speed = target > ele.offsetLeft ? 10 : -10;
  220.                 ele.timer = setInterval(function () {
  221.                     var val = target - ele.offsetLeft;
  222.                     ele.style.left = ele.offsetLeft + speed + "px";
  224.                     if (Math.abs(val) < Math.abs(speed)) {
  225.                         ele.style.left = target + "px";
  226.                         clearInterval(ele.timer);
  227.                     }
  228.                 }, 10)
  229.             }
  230.         }
  231.     </script>
  232. </head>
  234. <body>
  235. <div class="all" id='all'>
  236.     <div class="screen" id="screen">
  237.         <ul id="ul">
  238.             <li><img src="images/1.jpg" width="500" height="200"/></li>
  239.             <li><img src="images/2.jpg" width="500" height="200"/></li>
  240.             <li><img src="images/3.jpg" width="500" height="200"/></li>
  241.             <li><img src="images/4.jpg" width="500" height="200"/></li>
  242.             <li><img src="images/5.jpg" width="500" height="200"/></li>
  243.         </ul>
  244.         <ol>
  246.         </ol>
  247.         <div id="arr">
  248.             <span id="left"><</span>
  249.             <span id="right">></span>
  250.         </div>
  251.     </div>
  252. </div>
  253. </body>
  254. </html>

实现效果：

47-offset相关属性和匀速动画（含轮播图的实现） - 图4

温馨提示：动图太大，可以把http://img.smyhvae.com/20180202_2020.gif单独在浏览器中打开。

工程文件：

我的公众号

想学习更多技能？不妨关注我的微信公众号：千古壹号（id：qianguyihao）。

扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：

47-offset相关属性和匀速动画（含轮播图的实现） - 图5