- 元素偏移量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改变
- offset:
- 元素可视区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.立即执行函数最大的作用就是独立创建了一个作用域，里面的所有变量都是局部变量，不会有命名冲突的情况
- 1.语法规范 也可以传递参数进来
- 下面三种情况都会刷新页面都会触发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同样不会冒泡
- mouseenter鼠标事件
- 动画函数封装(重点)
- 1.动画实现原理
- 核心原理：通过定时器setInterval() 不断移动盒子位置
- 实现步骤：
- 1.获得盒子当前的位置 通过offsetLeft获取
- 2.让盒子在当前位置加上1个移动距离
- 3.利用定时器不断重复这个操作
- 4.加一个结束定时器的条件
- 5.注意此元素需要添加定位，才能使用element.style.left
- 1.动画实现原理
- 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 不写单位
- 注意函数需要传递2个参数，动画对象和移动到的距离
原文地址：https://www.cnblogs.com/fengzi759/p/12074719.html
时间： 2024-10-13 00:08:51