元素偏移量offset系列
offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移),大小等
获得元素距离带有定位父元素的位置
获得元素自身的大小(宽度高度)
注意：放回的数值都不带单位
offset系列常用属性
-
offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body element.offsetTop 返回元素相对带有定位父元素上分的偏移 element.offsetLeft 返回元素相对带有定位父元素左边框的偏移 element.offsetWidth 返回自身包括padding、边框、内容区的宽度，返回数组不带单位 element.offsetHeight 返回自身包括padding、边框、内容区的高度，返回数组不带单位 offsetTop和offsetLeft如果父亲没有定位，则以body为准，如果父亲有定位，则以父亲为准
-
offset与style区别
offset:
offset可以得到任意样式表中的样式值
offset系列获得的数值是没有单位的
offsetWidth包含padding+border+width
offsetWidth等属性是只读属性，只能获取不能赋值
所以，我们想要获取元素大小位置，用offset更合适
style
style只能得到行内样式表中的样式值(写在标签里面的CSS)
style.width获取的是带有单位的字符串
style.width获得不包含padding和border的值
style.width是可读写属性，可以获取也可以赋值
所以,我们想要 给元素更改值，则需要用style改变
元素可视区client系列
client翻译过来就是客户端，我们使用client系列的相关变量属性来获取元素可视区的相关信息。
通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等
client系列常用属性
-
client系列属性 作用 element.clientTop 返回元素上边框的大小 element.clientLeft 返回元素左边框的大小 element.clientWidth 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位 element.clientHeight 返回自身包括padding，内容区的高度，不含边框，返回数组不带单位
-
立即执行函数：不需要调用，立马能够自己执行的函数
1.语法规范 也可以传递参数进来
(function () {}) () 或者 (function(){}());
2.示例代码
-
+ (function(a,b){
+ console.log(2)
+ var num = 10; // 局部变量
+ console.log(a+b) //输出1
+ })(1,2) //第二个小括号可以看做是调用函数
-
如果有多个立即执行函数 必须用分号隔开
3.立即执行函数最大的作用就是独立创建了一个作用域，里面的所有变量都是局部变量，不会有命名冲突的情况
下面三种情况都会刷新页面都会触发load事件(了解)
1.a标签的超链接
2.F5或者刷新按钮(强制刷新)
3.前进后退按钮
但是火狐中，有个特点，有个"往返缓存"，这个缓存中不仅保存着页面数据，还保存了DOM和JS的状态；实际上是将整个页面都保存在了内存里
所以此时后退 按钮不能刷新页面
此时可以使用pageshow事件来触发，这个事件在页面显示时触发，无论页面是否来自缓存，在重新加载页面中，pageshow会在load事件触发后触发；根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件，注意这个事件给window添加
元素滚动scroll系列
scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等
scroll系列常用属性
-
scroll系列属性 作用 element.scrollTop 返回被卷去上侧距离，返回数值不带单位 element.scrollLeft 返回被卷去的左侧距离，返回数组不带单位 element.scrollWidth 返回自身实际的宽度，包含padding，不含边框，返回数值不带单位 element.scrollHeight 返回自身实际的高度，包含padding，不含边框，返回数值不带单位
-
页面被卷去的头部
如果浏览器的高(或宽)度不足以显示整个页面时，会自动出现滚动条，当滚动条向下滚动时，页面上面被隐藏掉的高度，我们称为页面被卷去的头部。
滚动条在滚动时会触发onscroll事件
页面被卷去的头部:可以通过window.pageYOffset获得，
如果是被卷去的左侧 window.pageXoffset获得
页面被卷去的头部兼容性解决方案
需要注意的是，页面被卷去的头部，有 兼容性的问题 ，因此被卷去得到头部通常有如下几种写法
声明了DTD,使用document.documentElement.scrollTop
未声明DTD, 使用document.body.scrollTop
新方法 window.pageYOffset和window.pageXOffset , IE9开始支持
DTD是写了这句话 < !DOCTYPE html>
注意：
元素被卷去的头部是element.scrollTop,如果是页面被卷去的头部则是window.pageYOffset
三大系列总结
-
三大系列大小对比 作用 element.offsetWidth 返回自身包括padding、边框、内容区的宽度，返回数组不带单位 element.clientWidth 返回自身包括padding、内容去的宽度、不含边框，返回数值不带单位 element.scrollWidth 返回自身实际的宽度，不含边框，返回数组不带单位 他们主要用法：
1.offset系列经常用于获得元素位置 offsetLeft offsetTop
2.client经常用于获取元素大小 clientWidth,clientHeight
3.scroll经常用于获取元素滚动距离 scrollTop scrollLeft
4.主要页面的滚动的距离通过 window.pageXOffset获得 和window.pageYOffset
-
mouseenter和mouseover的区别
mouseenter鼠标事件
当鼠标移动到元素上时就会触发mouseenter事件
类似mouseover，它们两者之间的差别是
mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。
mouseenter只会经过自身盒子才会触发
自身盒子 就是绑定事件的盒子
之所以这样，mouseenter不会冒泡
跟mouseenter搭配 鼠标离开 mouseleave同样不会冒泡
动画函数封装(重点)
1.动画实现原理
核心原理：通过定时器setInterval() 不断移动盒子位置
实现步骤：
1.获得盒子当前的位置 通过offsetLeft获取
2.让盒子在当前位置加上1个移动距离
3.利用定时器不断重复这个 *** 作
4.加一个结束定时器的条件
5.注意此元素需要添加定位，才能使用element.style.left
2.动画函数简单封装
注意函数需要传递2个参数，动画对象和移动到的距离
简单动画函数封装obj目标对象 target目标位置
示例代码如下
-
function animate(obj,target){
+ var timer = setInterval(function(){
+ if(obj.offsetLeft > = target){
+ //停止动画，本质是停止定时器
+ • clearInterval(timer);
+ }
+ obj.style.left = obj.offsetLeft + 1+'px'
+ },30)
+ }
+ //调用函数 animate(div,300)
3.动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数， 每次都要var声明定时器。
我们可以给不同的元素使用不同的定时器(自己专门用自己的定时器)
核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性
示例代码如下
-
function animate(obj,target){
+ 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
+ 解决方案就是 让我们元素只有一个定时器 执行
+ clearInterval(obj.timer);先清除以前的定时器,只保留当前的一个定时器在走
+ obj.timer = setInterval(function(){
+ if(obj.offsetLeft > = target){
+ //停止动画，本质是停止定时器
+ • clearInterval(obj.timer);
+ }
+ obj.style.left = obj.offsetLeft + 1+'px'
+ },30)
+ }
+ //调用函数 animate(div,300)
+ btn.addEventListener('click',function(){
+ animate(div,300)
+ })
4.缓动动画原理
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
2.核心算法:(目标值-现在的位置)/10 做为每次移动的距离步长
3.停止的条件是：让当前盒子位置等于目标位置就停止定时器
4.步长值为整数
示例代码如下
-
function animate(obj,target){
+ var timer = setInterval(function(){
+ //步长值写到定时器里面 把步长值改为整数 不要出现小数的问题
+ var step = (target - obj.offsetLeft)/10
+ step=step>0? Math.ceil(step): Math.floor(step);
+ if(obj.offsetLeft == target){
+ //停止动画，本质是停止定时器
+ • clearInterval(timer);
+ }
+ //把每次加1 这个步长值改为一个慢慢变小的值
+ // 步长公式：(目标值-现在的位置)/10
+ obj.style.left = obj.offsetLeft + step +'px'
+ },15)
+ }
-
匀速动画 就是 盒子是当前的位置+ 固定的值10
缓动动画就是 盒子当前的位置 + 变化的值(目标值-现在的位置)/10
动画函数多个目标值之间移动
可以让动画函数从800移动到500
当我们点击按钮的时候，判断步长是正值还是负值
1.如果是正值，则步长往大了取整
5.动画函数添加回到函数
回调函数原理：函数可以作为一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调
回调函数的位置，写在定时器结束之后
示例代码如下
-
function animate(obj,target,callback){
+ var timer = setInterval(function(){
+ //步长值写到定时器里面 把步长值改为整数 不要出现小数的问题
+ var step = (target - obj.offsetLeft)/10
+ step=step>0? Math.ceil(step): Math.floor(step);
+ if(obj.offsetLeft == target){
+ //停止动画，本质是停止定时器
+ • clearInterval(timer);
+ if(callback){ 如果回调函数存在就调用
+ • callback()
+ }
+ }
+ //把每次加1 这个步长值改为一个慢慢变小的值
+ // 步长公式：(目标值-现在的位置)/10
+ obj.style.left = obj.offsetLeft + step +'px'
+ },15)
+ }
+ 调用函数 animate(div,300 function(){
+ span.style.backgroundColor = 'red'
+ })
节流阀
防止轮播图按钮连续点击造成播放过快
节流阀的目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发
核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数
开始设置一个变量 var flag = true;
if(flag){flag = false do something} 关闭水龙头
利用回调函数 动画执行完毕，flag = true 打开水龙头
滚动窗口至文档中的特定位置
window.scroll(x,y) 里面的x和y 不写单位
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）