前端学习(49)~offset相关属性和匀速动画(含轮播图实现)
Posted vincent-yuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端学习(49)~offset相关属性和匀速动画(含轮播图实现)相关的知识，希望对你有一定的参考价值。
JS动画的主要内容如下：
1、三大家族和一个事件对象：
-
三大家族：offset/scroll/client。也叫三大系列。
-
事件对象/event（事件被触动时，鼠标和键盘的状态）（通过属性控制）。
2、动画(闪现/匀速/缓动)
3、冒泡/兼容/封装
offset 家族的组成
今天来讲一下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
这两个属性，他们绑定在了所有的节点元素上。获取元素之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。
举例如下：
<!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
以上是关于前端学习(49)~offset相关属性和匀速动画(含轮播图实现)的主要内容，如果未能解决你的问题，请参考以下文章