动画

动画原理

盒子的位置 = 盒子此时的位置 + 位移

移动的盒子要定位

btn.onclick = function(){
        setInterval(function(){
//            console.log(div1.offsetLeft)
            var start_pos = div1.offsetLeft;
            div1.style.left = start_pos + 1 + "px";
//            console.log(div1.style.left)
        },1)
}

　　

定位

相对定位没有脱离标准流，绝对定位和固定定位脱离标准流，一般定位中子绝父相。ps:使用html源码编辑修改格式才不错

position:relative;/*absolutely、fixed*/

　　

盒子位置

盒子位移：
offsetLeft：相对于最近定位父元素的位置，数字，只读，若没有父级定位元素，则相对于body
style.left:行内样式的left值，若没有，返回空字符串，数字+px，可以赋值
盒子宽高
offsetWidth:width+padding+border
offsetHeight:height+padding+border    数值为number类型，console.log(typeof div.offsetWidth)
盒子的已定位的父盒子
offsetParent

　　

 

 

 

 

 

　　

转载于:https://www.cnblogs.com/DLGD/p/7756085.html