offset偏移命令,offs偏移指令用于哪个坐标系(),offset函数向右偏移,offset函数向上偏移<br> <div><ul><li>1. 元素偏移量 offset 系列</li><li><ul><li>1.1 offset 概述</li><li>1.2 offset 与 style 区别</li></ul></li><li>2. 元素可视区 client 系列</li><li><ul><li>2.1 立即执行函数</li><li>2.2 load 事件的触发</li></ul></li><li>3. 元素滚动 scroll 系列</li><li><ul><li>3.1 元素 scroll 系列属性</li><li>3.2 页面被卷去的头部</li><li>3.3 页面被卷去的头部兼容性解决方案</li></ul></li><li>三大系列总结</li><li>mouseenter 和mouseover的区别</li><li>4. 动画函数封装</li><li><ul><li>4.1 动画实现原理</li><li>4.2 动画函数的简单封装</li><li>4.3 动画函数给不同元素记录不同定时器</li><li>4.4 缓动效果原理</li><li>4.5 动画函数多个目标值之间移动</li><li>4.6 动画函数添加回调函数</li><li>4.7 动画函数封装到单独的JS文件</li></ul></li><li>5. 常见网页特效案例</li><li><ul><li>5.1 案例：网页轮播图（Ja【【微信】】原生写法）</li><li>5.2 节流阀</li></ul></li></ul> </div> <p>offset ― 偏移量， 使用 offset 系列相关属性可动态的得到该元素的位置（偏移）、大小等。</p> <ul><li>获得元素距离带有定位父元素的位置；</li><li>获得元素自身的大小（宽度高度）。</li><li>注： 返回的数值都不带单位</li></ul> <p><strong>offset 系列常用属性：</strong></p> <table><thead><tr><th>offset 系列属性</th><th>作用</th></tr></thead><tbody><tr><td>返回作为该元素带有定位的父级元素，如果父级元素没有定位，则返回body</td></tr><tr><td>返回元素相对带有定位父元素上方的偏移</td></tr><tr><td>返回元素相对带有定位父元素左边框的偏移</td></tr><tr><td>返回自身包括padding、边框、内容区的宽度、返回数值不带单位。</td></tr><tr><td>返回自身包括padding、边框、内容区的高度、返回数值不带单位。</td></tr></tbody></table> <table><thead><tr><th>offset</th><th>style</th></tr></thead><tbody><tr><td>offset 可以得到任意样式表中的样式值</td><td>style 只能得到行内样式表中的样式值</td></tr><tr><td>offset 系列获得的数值没有单位</td><td>style.width 获得的是带有单位的字符串</td></tr><tr><td>offsetWidth 包含padding+border+width</td><td>style.width 获得不包含padding和border 的值</td></tr><tr><td>offsetWidth 是只读属性，只能获取不能赋值</td><td>style.width 是可读写属性，可获取也可以赋值</td></tr></tbody></table> <blockquote> <p>因此， 想要获取元素大小位置，用offset更合适； 想要给元素更改值，则需要用style改变。</p> </blockquote> <ul><li>获得元素距离带有定位父元素的位置；</li><li>获得元素自身的大小（宽度高度）。</li></ul> <p> <strong>案例</strong>：获取鼠标在盒子内的坐标</p> <ul><li> <p>实现思路 ① 得到鼠标在页面中的坐标（, ） ② 得到盒子在页面中的距离 ( , ) ③ 鼠标在页面中的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标 ④ 移动鼠标，获取最新的坐标，使用鼠标移动事件 。</p> </li><li> <p>实现代码</p> </li></ul> <p>client (客户端)，利用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。</p> <table><thead><tr><th>client系列属性</th><th>返回值</th></tr></thead><tbody><tr><td>返回元素上边框的大小</td></tr><tr><td>返回元素左边框的大小</td></tr><tr><td>返回自身，包换padding/内容区的宽度，不含边框，返回数据不带单位</td></tr><tr><td>返回自身，包换padding/内容区的高度，不含边框，返回数据不带单位</td></tr></tbody></table> <ul><li>立即执行函数不需要调用，立马能够自己执行；</li><li>主要作用：创建一个独立的作用域，里面所有的变量都是局部变量，避免了命名冲突问题</li><li><strong>立即执行函数的用法</strong>：</li></ul> <p>下面是 <strong>淘宝</strong> 源码分析</p> <p>下面三种情况都会刷新页面都会触发 load 事件</p> <blockquote> <p>a标签的超链接 F5或者刷新按钮（强制刷新） 前进后退按钮</p> </blockquote> <p>但是，火狐中有个特点――“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和Ja【【微信】】的状态；实际上是将整个页面都保存在了内存里。<strong>所以此时后退按钮不能刷新页面</strong>。 ―― 但可以使用 事件来触发。该事件在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，会在事件触发后触发；根据事件对象中的来判断是否是缓存中的页面触发的事件，注意这个事件给window添加。</p> <p>scroll 意为滚动，使用 scroll 系列的相关属性可动态获得该元素的大小、滚动距离等。</p> <table><thead><tr><th>scroll 系列属性</th><th>作用</th></tr></thead><tbody><tr><td>返回被卷去的上侧距离，返回值不带单位</td></tr><tr><td>返回被卷去的左侧距离，返回值不带单位</td></tr><tr><td>返回自身实际的宽度，不含边框，返回数值不带单位</td></tr><tr><td>返回自身实际的高度，不含边框，返回数值不带单位</td></tr></tbody></table> <p>如果浏览器的高度或宽度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 事件。</p> <p><strong>案例：淘宝固定右侧侧边栏</strong></p> <ul><li>原先侧边栏是绝对定位</li><li>当页面滚动到一定位置，侧边栏改为固定定位；</li><li>页面继续滚动，会让 返回顶部显示出来。</li></ul> <p><strong>实现思路</strong></p> <p>① 页面滚动事件 ，事件源：； ② 滚动到某个位置，获取页面被卷去的上部值； ③ 页面被卷去的头部：通过获得。（如果是被卷去的左侧，则通过获得）； ④ 注：元素被卷去的头部是 ；如果是页面被卷去的头部则是 ； 这个值，也可以通过盒子的 得到，如果≥这个值，就让盒子变成固定定位.。</p> <p>需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：</p> <ol><li>声明了 DTD，使用 document.documentElement.scrollTop</li><li>未声明 DTD，使用 document.body.scrollTop</li><li>新方法 window.pageYOffset 和 window.pageXOffset，IE9 开始支持</li></ol> <p><strong>兼容性函数封装</strong></p> <p>兼容性<strong>函数调用</strong></p> <table><thead><tr><th>三大系列大小对比</th><th>作用</th></tr></thead><tbody><tr><td>返回自身，包括padding、边框、内容区的宽度，返回值不带单位</td></tr><tr><td>返回自身，包括padding、内容区的宽度，不含边框。返回值不带单位</td></tr><tr><td>返回自身实际的宽度，不含边框。返回值不带单位</td></tr></tbody></table> <p>主要<strong>用途</strong>/<strong>用法</strong>：</p> <table><thead><tr><th>系列</th><th>用途、用法</th></tr></thead><tbody><tr><td>系列</td><td>经常用于获得元素位置 </td></tr><tr><td>系列</td><td>经常用于获取元素大小 </td></tr><tr><td>系列</td><td>经常用于获取滚动距离 </td></tr></tbody></table> <p><strong>注</strong>：<strong>页面滚动距离</strong>通过 获得</p> <ul><li>mouseenter 鼠标事件</li></ul> <table><thead><tr><th>mouseenter</th><th>mouseover</th></tr></thead><tbody><tr><td>当鼠标移动到元素上时就会触发</td></tr><tr><td>只会经过自身盒子触发（不会冒泡）</td><td>鼠标经过自身盒子会触发，经过子盒子还会触发。</td></tr><tr><td>跟它搭配，（鼠标离开） 同样不会冒泡</td></tr></tbody></table> <p><strong>核心原理</strong>：通过定时器 setInterval() 不断移动盒子位置。 <strong>实现步骤</strong>：</p> <ol><li>获得盒子当前位置</li><li>让盒子在当前位置增加或减少1个单位的移动距离；</li><li>利用定时器不断重复这个操作</li><li>加一个结束定时器的条件</li></ol> <blockquote> <p>注：此元素需要添加定位，才能使用</p> </blockquote> <p>函数需要传递2个参数，<strong>动画对象</strong>和<strong>移动到的距离</strong>。</p> <p>如果多个元素都使用同一动画函数，则无需每次都去声明定时器。可给不同的元素使用不同的定时器 <strong>核心原理</strong>：由于Ja【【微信】】是一门动态语言，所以可以很方便的给当前对象添加属性。</p> <p>实例代码如下：</p> <p><strong>缓动动画</strong>：就是让元素运动速度有所变化，最常见的是让速度慢慢停下来 <strong>实现思路</strong>：</p> <ol><li>让盒子每次移动的距离慢慢变小；</li><li>核心算法： <strong>(目标值 - 现在的位置 ) / 10</strong> 做为每次移动的距离 <strong>步长</strong></li><li>停止的条件： 当 <strong>当前盒子位置 = 目标位置</strong> 就停止定时器</li></ol> <blockquote> <p>注：步长值需要取整。</p> </blockquote> <p><strong>实例代码</strong>（缓动动画函数封装）：</p> <p>可以让动画函数从 800 移动到 500。 当点击按钮时，判断步长是正值还是负值</p> <ol><li>如果是正值，则步长 往大了取整；</li><li>如果是负值，则步长 向小了取整。</li></ol> <p><strong>实例代码：</strong></p> <p>回调函数原理： 函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。 写回调函数的位置：定时器结束的位置。</p> <p>经常使用的动画函数，可单独封装到一个JS文件里，使用的时候引用此JS文件即可。</p> <ol><li>单独新建一个JS文件；</li><li>HTML文件引入 JS 文件。</li></ol> <p><strong>5.1.1 功能需求：</strong> 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 2.点击右侧按钮一次，图片往左播放一张，以此类推， 左侧按钮同理。 3.图片播放的同时，下面小圆圈模块跟随一起变化。 4.点击小圆圈，可以播放相应图片。 5.鼠标不经过轮播图， 轮播图也会自动播放图片。 6.鼠标经过，轮播图模块， 自动播放停止。</p> <p><strong>5.1.2 思路</strong> ① 单独新建js文件夹和js文件，并引入HTML页面中； ② 添加 load 事件； ③ 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮； ④ 显示隐藏 display 按钮。</p> <p><strong>5.1.3 动态生成小圆圈</strong> <strong>核心思路：</strong> ① 小圆圈的个数要跟图片张数一致； ② 首先得到里面图片的张数（图片放入里面，所以就是的个数）； ③ 利用循环动态生成小圆圈（这个小圆圈要放入里面）； ④ 创建节点 ； ⑤ 插入节点 ； ⑥ 第一个小圆圈需要添加 【【微信】】 类。</p> <p>5.1.4 设定当前小圆圈（排他思想） ① 点击当前小圆圈，就添加类 ② 其余的小圆圈就移除类</p> <blockquote> <p>注： 在生成小圆圈的同时，就可直接绑定点击事件。</p> </blockquote> <p><strong>5.1.5 点击小圆圈滚动图片</strong> ① 需要用到动画函数，将文件引入（注，因为 依赖 所以 要写到 上面）； ② 使用动画函数的前提：该元素必须有定位； ③ 注意是 移动 而不是小； ④ 滚动图片的核心算法： 点击某个小圆圈 ，图片滚动。 移动距离=小圆圈的索引号×图片的宽； ⑤ 需要获取小圆圈的索引号，在生成小圆圈时，给它设置一个自定义属性，点击时获取此自定义属性即可。</p> <p><strong>5.1.6 点击右侧按钮，图片滚动</strong>。 ① 声明变量， 每点击1次，自增1， 。</p> <blockquote> <p>图片无缝滚动原理： 把ul 第一个 复制一份，放到 的最后面； 当图片滚动到克隆的最后一张图片时， 让 快速的、不做动画的跳到最左侧： left 为0，同时num 赋值为0，从重新开始滚动图片</p> </blockquote> <p>② 克隆第一张图片；克隆 第一个， </p> <blockquote> <p>复制里面的子节点。()括号内加 是深克隆， 浅克隆。</p> </blockquote> <p>③ 添加到 最后面 。</p> <p><strong>5.1.7</strong> <strong>点击右侧按钮， 小圆圈跟随变化</strong> ① 再声明一个变量，每次点击自增1，因左右侧按钮都需要此变量，因此声明为全局变量。 ② 但是图片张数比小圆圈多一个（首尾图片相同），需增加一个判断条件 ③如有5张图片，则小圆点只能有4个，即判断写为 就 从新复原为 0。</p> <p><strong>5.1.8 自动播放功能</strong> ① 添加定时器；</p> <blockquote> <p>自动播放轮播图，实际就类似于点击了右侧按钮</p> </blockquote> <p>② 此时可接手动调用右侧按钮点击事件（如 ） ③ 鼠标经过轮播图focus 时，就停止定时器； ④ 鼠标离开focus则开启定时器。</p> <p>防止轮播图按钮连续点击造成播放过快。 <strong>节流阀目的</strong>：当上一个函数动画内容执行完毕，再执行下一个函数动画时，让事件无法连续触发。 <strong>实现思路</strong>：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。 开始设置一个变量 ;</p> <p>利用回调函数 动画执行完毕， 打开水龙头。</p> <p><strong>5.2.1 案例：返回顶部</strong> 滚动窗口至文档中的特定位置。</p> <p>注意，里面的和 不跟单位，直接写数字。</p> <p>带有动画的返回顶部 ① 此时可继续使用之前封装的动画函数； ② 只需把所有的相关的值改为跟页面垂直滚动距离相关即可； ③ 页面滚动了多少，可通过 获得； ④ 最后是页面滚动，使用 。</p> <br>..淘宝618助力领喵币,淘宝618助力领喵币,淘宝互助次数上限怎么增加的,我们的2023年 618天猫理想生活狂欢季淘宝互助群二维码2023怎么弄出来里有一些很2023年 618天猫狂欢盛典的好玩家，你将会与一群有创造力的人一起完成2023年 618淘宝狂欢节游戏！
本文地址：
/show-91170.html
版权声明：除非特别标注原创，其它均来自互联网，转载时请以链接形式注明文章出处。
