offset 偏移量 只读不能写
一, offsetLeft/offsetTop 返回距离上级盒子(带有定位的左边/顶端的距离(若无定位,则以浏览器为标准)
offsetLeft和style.left的区别
(1) style.left只能获取行内样式,offsetLeft 可以获取行内样式和内嵌样式
(2) offsetLeft 只读,style.left可读可写
(3) offsetLeft是数值,style.left是字符串并且有单位px,style.left为空时返回空字符串,offsetLeft返回0;
(4)offsetLeft可以返回没有定位盒子的距离左侧的距离(以浏览器为标准),而style.left不可以
(5)offsetLeft以border左上角为基准,style.left以margin左上角为基准
二,offsetWidth/offsetHeight 获取元素自身的宽和高(不包括外边距)
offsetWidth/offsetHeight=Width/Height+padding+border;
offsetHeight和style.height的区别
(1) style.height只能获取行内样式,offsetHeight可以获取行内样式和内嵌样
(2) style.height是字符串(而且带单位),offsetHeight是数值
(3)style.height可读可写,offsetHeight是只读属性
移动动画的原理=盒子本身的位置+步长
缓动动画的原理主要是通过offset系列的属性实现的 :
第一步: 设定步长 ;
第二步:每一次移动后,盒子距离目标原来越近,逐渐减小步长,达到缓动的效果;
缓动动画函数封装代码如下:
function action(ele,target) {
//要用定时器,先清定时器
clearInterval(ele.timer);
ele.timer=setInterval(function () {
//设置步长
var step=(target-ele.offsetLeft)/10;
//二次处理步长
step=step>0?Math.ceil(step):Math.floor(step);
//缓动滑动
ele.style.left=ele.offsetLeft+step+"px";
//判断是否要清除定时器
if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
ele.style.left=target+"px";
clearInterval(ele.timer);
console.log(ele.offsetLeft);
}
},30);
}