除了干燥的js，js的动画效果必须掌握。
作者：互联网
我们BOM浏览器进行操作,DOM文档，事件。：js文档理论
offset，client，scroll。+ 动画特效。 + js交互案例。：页面一些特性。
记住50个案例，就好！
0JS特效。
1 offset,client,scroll家族。
css里面获取位置,盒子的大小，。但是如何通过js来获取呢？那么 需要通过offset
offset 偏移量。
element.offsetTop , offsetLeft:距离左边的位置，和顶部的位置。 没有右边和下边。
距离是有标准的！以什么为标准呢。如果父元素，以父元素。没有父元素，以body为准。
element.Width, element.Height : 盒子本身的宽度和高度。
（包括padding，border）
element.offsetParent: 获取父元素的。
返回带有定位的父亲，一级一级向上找，否则返回的是body。
element.parentNode返回的是最近一级的亲父亲，无论父亲有没有定位。
offset和style的区别。
1 e.offsetWidth <->e.style.width style只能获取行内样式值。不能获取style里面的。
2 offset带来的数字的，不带单位。e.style.width:获得带有单位的字符串。
3 e.offsetWidth 包含：padding+border+width。e.style.width:width
4 e.offset只能读取，不能改。 e.style.width ='200px' 可以读可以更改。
因此想要获取元素的大小位置，offset更合适。 如果想改变元素，style更合适。
1 获得元素 距离 带有定位父元素的位置。 offsetParent.
2 获取元素自身的大小。
3 返回的数值不带单位。
案例一： 获取鼠标的坐标。
鼠标在页面的坐标。 e.PageX e.PageY
子距离左侧的距离。e.offsetWidth,e.offsetTop
client： client和offset基本一样。除了element.clientWidth ,e.clientHeight:不包含边框！
立即执行函数：1.写法 ( function(){} ) () . ( fcuntion(){} () )
2.第二个()可以传入参数。
3. 独立创建一个作用域。所有变量都是局部变量。
元素滚动scroll系列。
scrollHeight,scrollWidth: 不包含边框，指的是实际大小。尤其是滚动距离。
元素的距离：
offset 系列主要获取的是元素的位置： offsetLeft，offsetTop
client经常获取元素的大小： client Width, clientHeight
scroll经常获取滚动的距离：scrollTop,scrollLeft
页面的滚动距离：window.pageXoffset获得
2 动画。基本动画，匀速动画，幻速动画，透明度动画，动画封装。
动画函数封装！
定时器setInterval（）不断移动盒子位置。
1 获得盒子当前的位置。
2 盒子加一个位置。
3 定时器不断重复这个动作。
4 加一个结束定时器的条件。
5 此元素需要定位才可以，才能使用e.style.left
3 常用js特效。
4 事件。 事件流。事件对象。事件处理程序。事件对象属性。
mouse enter : 只会经过自身盒子会触发。不会冒泡。mouseleave也不会冒泡。
mouse over: 经过自身盒子会触发，经过子盒子还会触发。子盒子冒泡到父盒子。
标签：动画,style,盒子,获取,元素,js,干燥,offset 来源： https://www.cnblogs.com/hacker-caomei/p/14905403.html