offset偏移命令,offs偏移指令用于哪个坐标系(),offset函数向右偏移,offset函数向上偏移

offset ― 偏移量， 使用 offset 系列相关属性可动态的得到该元素的位置（偏移）、大小等。

• 获得元素距离带有定位父元素的位置；
• 获得元素自身的大小（宽度高度）。
• 注： 返回的数值都不带单位

offset 系列常用属性：

offset 系列属性	作用
返回作为该元素带有定位的父级元素，如果父级元素没有定位，则返回body
返回元素相对带有定位父元素上方的偏移
返回元素相对带有定位父元素左边框的偏移
返回自身包括padding、边框、内容区的宽度、返回数值不带单位。
返回自身包括padding、边框、内容区的高度、返回数值不带单位。

offset	style
offset 可以得到任意样式表中的样式值	style 只能得到行内样式表中的样式值
offset 系列获得的数值没有单位	style.width 获得的是带有单位的字符串
offsetWidth 包含padding+border+width	style.width 获得不包含padding和border 的值
offsetWidth 是只读属性，只能获取不能赋值	style.width 是可读写属性，可获取也可以赋值

因此， 想要获取元素大小位置，用offset更合适； 想要给元素更改值，则需要用style改变。

• 获得元素距离带有定位父元素的位置；
• 获得元素自身的大小（宽度高度）。

案例：获取鼠标在盒子内的坐标

• 实现思路 ① 得到鼠标在页面中的坐标（, ） ② 得到盒子在页面中的距离 ( , ) ③ 鼠标在页面中的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标 ④ 移动鼠标，获取最新的坐标，使用鼠标移动事件 。

• 实现代码

client (客户端)，利用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

client系列属性	返回值
返回元素上边框的大小
返回元素左边框的大小
返回自身，包换padding/内容区的宽度，不含边框，返回数据不带单位
返回自身，包换padding/内容区的高度，不含边框，返回数据不带单位

• 立即执行函数不需要调用，立马能够自己执行；
• 主要作用：创建一个独立的作用域，里面所有的变量都是局部变量，避免了命名冲突问题
• 立即执行函数的用法：

下面是 淘宝 源码分析

下面三种情况都会刷新页面都会触发 load 事件

a标签的超链接 F5或者刷新按钮（强制刷新） 前进后退按钮

但是，火狐中有个特点――“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和Ja【【微信】】的状态；实际上是将整个页面都保存在了内存里。所以此时后退按钮不能刷新页面。 ―― 但可以使用 事件来触发。该事件在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，会在事件触发后触发；根据事件对象中的来判断是否是缓存中的页面触发的事件，注意这个事件给window添加。

scroll 意为滚动，使用 scroll 系列的相关属性可动态获得该元素的大小、滚动距离等。

scroll 系列属性	作用
返回被卷去的上侧距离，返回值不带单位
返回被卷去的左侧距离，返回值不带单位
返回自身实际的宽度，不含边框，返回数值不带单位
返回自身实际的高度，不含边框，返回数值不带单位

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

案例：淘宝固定右侧侧边栏

• 原先侧边栏是绝对定位
• 当页面滚动到一定位置，侧边栏改为固定定位；
• 页面继续滚动，会让 返回顶部显示出来。

实现思路

① 页面滚动事件 ，事件源：； ② 滚动到某个位置，获取页面被卷去的上部值； ③ 页面被卷去的头部：通过获得。（如果是被卷去的左侧，则通过获得）； ④ 注：元素被卷去的头部是 ；如果是页面被卷去的头部则是 ； 这个值，也可以通过盒子的 得到，如果≥这个值，就让盒子变成固定定位.。

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

1. 声明了 DTD，使用 document.documentElement.scrollTop
2. 未声明 DTD，使用 document.body.scrollTop
3. 新方法 window.pageYOffset 和 window.pageXOffset，IE9 开始支持

兼容性函数封装

兼容性函数调用

三大系列大小对比	作用
返回自身，包括padding、边框、内容区的宽度，返回值不带单位
返回自身，包括padding、内容区的宽度，不含边框。返回值不带单位
返回自身实际的宽度，不含边框。返回值不带单位

主要用途/用法：

系列	用途、用法
系列	经常用于获得元素位置
系列	经常用于获取元素大小
系列	经常用于获取滚动距离

注：页面滚动距离通过 获得

• mouseenter 鼠标事件

mouseenter	mouseover
当鼠标移动到元素上时就会触发
只会经过自身盒子触发（不会冒泡）	鼠标经过自身盒子会触发，经过子盒子还会触发。
跟它搭配，（鼠标离开） 同样不会冒泡

核心原理：通过定时器 setInterval() 不断移动盒子位置。 实现步骤：

1. 获得盒子当前位置
2. 让盒子在当前位置增加或减少1个单位的移动距离；
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件

注：此元素需要添加定位，才能使用

函数需要传递2个参数，动画对象和移动到的距离。

如果多个元素都使用同一动画函数，则无需每次都去声明定时器。可给不同的元素使用不同的定时器 核心原理：由于Ja【【微信】】是一门动态语言，所以可以很方便的给当前对象添加属性。

实例代码如下：

缓动动画：就是让元素运动速度有所变化，最常见的是让速度慢慢停下来 实现思路：

1. 让盒子每次移动的距离慢慢变小；
2. 核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离 步长
3. 停止的条件： 当 当前盒子位置 = 目标位置 就停止定时器

注：步长值需要取整。

实例代码（缓动动画函数封装）：

可以让动画函数从 800 移动到 500。 当点击按钮时，判断步长是正值还是负值

1. 如果是正值，则步长 往大了取整；
2. 如果是负值，则步长 向小了取整。

实例代码：

回调函数原理： 函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。 写回调函数的位置：定时器结束的位置。

经常使用的动画函数，可单独封装到一个JS文件里，使用的时候引用此JS文件即可。

1. 单独新建一个JS文件；
2. HTML文件引入 JS 文件。

5.1.1 功能需求： 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 2.点击右侧按钮一次，图片往左播放一张，以此类推， 左侧按钮同理。 3.图片播放的同时，下面小圆圈模块跟随一起变化。 4.点击小圆圈，可以播放相应图片。 5.鼠标不经过轮播图， 轮播图也会自动播放图片。 6.鼠标经过，轮播图模块， 自动播放停止。

5.1.2 思路 ① 单独新建js文件夹和js文件，并引入HTML页面中； ② 添加 load 事件； ③ 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮； ④ 显示隐藏 display 按钮。

5.1.3 动态生成小圆圈 核心思路： ① 小圆圈的个数要跟图片张数一致； ② 首先得到里面图片的张数（图片放入里面，所以就是的个数）； ③ 利用循环动态生成小圆圈（这个小圆圈要放入里面）； ④ 创建节点 ； ⑤ 插入节点 ； ⑥ 第一个小圆圈需要添加 【【微信】】 类。

5.1.4 设定当前小圆圈（排他思想） ① 点击当前小圆圈，就添加类 ② 其余的小圆圈就移除类

注： 在生成小圆圈的同时，就可直接绑定点击事件。

5.1.5 点击小圆圈滚动图片 ① 需要用到动画函数，将文件引入（注，因为 依赖 所以 要写到 上面）； ② 使用动画函数的前提：该元素必须有定位； ③ 注意是 移动 而不是小； ④ 滚动图片的核心算法： 点击某个小圆圈 ，图片滚动。 移动距离=小圆圈的索引号×图片的宽； ⑤ 需要获取小圆圈的索引号，在生成小圆圈时，给它设置一个自定义属性，点击时获取此自定义属性即可。

5.1.6 点击右侧按钮，图片滚动。 ① 声明变量， 每点击1次，自增1， 。

图片无缝滚动原理： 把ul 第一个 复制一份，放到 的最后面； 当图片滚动到克隆的最后一张图片时， 让 快速的、不做动画的跳到最左侧： left 为0，同时num 赋值为0，从重新开始滚动图片

② 克隆第一张图片；克隆 第一个，

复制里面的子节点。()括号内加 是深克隆， 浅克隆。

③ 添加到 最后面 。

5.1.7 点击右侧按钮， 小圆圈跟随变化 ① 再声明一个变量，每次点击自增1，因左右侧按钮都需要此变量，因此声明为全局变量。 ② 但是图片张数比小圆圈多一个（首尾图片相同），需增加一个判断条件 ③如有5张图片，则小圆点只能有4个，即判断写为 就 从新复原为 0。

5.1.8 自动播放功能 ① 添加定时器；

自动播放轮播图，实际就类似于点击了右侧按钮

② 此时可接手动调用右侧按钮点击事件（如 ） ③ 鼠标经过轮播图focus 时，就停止定时器； ④ 鼠标离开focus则开启定时器。

防止轮播图按钮连续点击造成播放过快。 节流阀目的：当上一个函数动画内容执行完毕，再执行下一个函数动画时，让事件无法连续触发。 实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。 开始设置一个变量 ;

利用回调函数 动画执行完毕， 打开水龙头。

5.2.1 案例：返回顶部 滚动窗口至文档中的特定位置。

注意，里面的和 不跟单位，直接写数字。

带有动画的返回顶部 ① 此时可继续使用之前封装的动画函数； ② 只需把所有的相关的值改为跟页面垂直滚动距离相关即可； ③ 页面滚动了多少，可通过 获得； ④ 最后是页面滚动，使用 。

..淘宝618助力领喵币,淘宝618助力领喵币,淘宝互助次数上限怎么增加的,我们的2023年 618天猫理想生活狂欢季淘宝互助群二维码2023怎么弄出来里有一些很2023年 618天猫狂欢盛典的好玩家，你将会与一群有创造力的人一起完成2023年 618淘宝狂欢节游戏！