JS中如何实现offset和匀速动画
这篇文章主要介绍了JS中如何实现offset和匀速动画,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联建站-专业网站定制、快速模板网站建设、高性价比南浔网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式南浔网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖南浔地区。费用合理售后完善,10余年实体公司更值得信赖。
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;
这两个属性,他们绑定在了所有的节点元素上。获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和高。
举例如下:
2、offsetLeft 和 offsetTop
返回距离上级盒子(带有定位)左边的位置;如果父级都没有定位,则以body为准。
offsetLeft: 从父亲的 padding 开始算,父亲的 border 不算。
举例:
在父盒子有定位的情况下,offsetLeft == style.left(去掉px之后)。注意,后者只识别行内样式。但区别不仅仅于此,后面会讲。
3、offsetParent
检测父系盒子中带有定位的父盒子节点。返回结果是该对象的父级(带有定位)。
如果当前元素的父级元素,没有CSS定位(position为absolute、relative、fixed),那么offsetParent的返回结果为body。
如果当前元素的父级元素,有CSS定位(position为absolute、relative、fixed),那么offsetParent的返回结果为最近的那个父级元素。
举例: