其他分享
首页 > 其他分享> > 除了干燥的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: 经过自身盒子会触发,经过子盒子还会触发。子盒子冒泡到父盒子。

标签:动画,style,盒子,获取,元素,js,干燥,offset
来源: https://www.cnblogs.com/hacker-caomei/p/14905403.html