除了干燥的js，js的动画效果必须掌握。

本文主要是介绍除了干燥的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: 经过自身盒子会触发，经过子盒子还会触发。子盒子冒泡到父盒子。

这篇关于除了干燥的js，js的动画效果必须掌握。的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！