JavaScript学习手册(25)

Posted designbyly

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript学习手册(25)相关的知识,希望对你有一定的参考价值。

元素偏移量offset系列

可以动态的得到该元素的位置(偏移),大小等。

  1. 获得元素距离带有定位父元素的位置
  2. 获得元素自身的大小(宽度/高度)
  3. 注意:返回的数值都不带单位

常见属性

  1. element.offsetParent 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回body
  2. element.offsetTop 返回元素相对带有定位父元素上方的偏移
  3. element.offsetLeft 返回元素相对带有定位父元素左边框的偏移
  4. element.offsetWidth 返回自身包括padding,边框,内容区的宽度,返回数值不带单位
  5. element.offsetHeight 返回自身包括padding,边框,内容区高度,返回数值不带单位

offset与style的区别

  1. offset (获取元素大小位置)

    可以得到任意样式表中的样式值

    获得的数值没有单位

    offsetWidth包含padding+border+width

    offsetWidth等属性只是只读属性,只能获取不能赋值

  2. style (元素更改值)

    只能得到行内样式表中的样式值

    style.width获得的1是带有单位的字符串

    style.width获得不包含padding和border的值

    style.width是可读写属性,可以获取也可以赋值

元素可视区client系列

可以动态的得到该元素的边框大小,元素大小等。

常见属性。

  1. element.clientTop 返回元素上边框的大小
  2. element.clientLeft 返回元素左边框的大小
  3. element.clientWidth 返回自身包括padding,内容区的宽度,不含边框,返回数值不带单位
  4. element.clientHeight 返回自身包括padding,内容区的高度,不含边框,返回数值不带单位

立即执行函数:

  • 不需要调用,立马自己进行执行的函数
  • 写法:(function(){}) () (function(){}())
  • 独立创建了一个作用域,里面变量都是局部变量,不会有命名冲突的情况。

pageshow事件

在页面显示时触发,无论页面是否来自缓存。在重新加载页面中,此事件会在load事件触发后触发,根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件

注意:此事件是给window添加

元素滚动scroll系列

可以动态的得到该元素的大小,滚动距离等

常见属性

  • element.scrollTop 返回被卷上去的上侧距离,返回数值不带单位
  • element.scrollLeft 返回被卷上去的左侧距离,返回数值不带单位
  • element.scrollWidth 返回自身实际的宽度,不含边框,返回数值不带单位
  • element.scrollHeight 返回自身实际的高度,不含边框,返回数值不带单位

页面被卷去的头部

如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发onscrool事件。

mouseenter和mouseover的区别

  1. 当鼠标移动到元素上时就会触发mouseenter事件。
  2. 类似于mouseover
  3. mouseover鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter只会经过自身盒子触发
  4. mouseenter不会冒泡
  5. 跟mouseenter搭配鼠标离开mouseleave同样不会冒泡

封装简单动画函数

**动画实现原理:**通过定时器setInterval()不断移动盒子位置

实现步骤:

  1. 获得盒子当前位置
  2. 让盒子在当前位置加上1个移动距离
  3. 利用定时器不断重复这个操作
  4. 加一个结束定时器的条件
  5. 注意此元素需要添加定位,才能使用element.style.left
  • 动画函数简单封装
  • 动画函数给不同元素记录不同定时器
  • 如果多个元素都使用这个动画函数,每次都要var声明定时器。我们可以给不同的元素使用不同的定时器(自己专门用自己的定时器)
  • 核心原理:利用JS给当前对象添加属性

**缓动效果原理:**缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来。

思路:

  1. 让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。
  2. 核心算法:(目标值-现在的位置)/10 做为每次移动的距离步长。
  3. 停止的条件:让当前盒子位置等于目标位置就停止定时器。

动画函数添加回调函数

回调函数原理:函数可以作为一个参数,将这个函数作为参数传到另一个参数里面,当那个函数执行完毕之后,再执行传进去的这个函数,这个过程就叫做回调。

回调函数写的位置:定时器结束的位置

动画

在这里插入图片描述
每日一句
真诚是美酒,年份越久越醇香浓型;真诚是焰火,在高处绽放才愈是美丽;真诚是鲜花,送之于人手有余香。

以上是关于JavaScript学习手册(25)的主要内容,如果未能解决你的问题,请参考以下文章

《Python学习手册 第五版》 -第25章 高级模块话题

JavaScript学习手册

JavaScript学习手册(29)

JavaScript学习手册(50)

JavaScript学习手册(64)

JavaScript学习手册(44)