摘要: 1.动画函数封装 1.1. 动画实现原理 核心原理:通过定时器 setInterval() 不断移动盒子位置。 实现步骤: 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位,才能使用element.style.left 1 阅读全文
posted @ 2020-10-03 22:48 행운의소녀 阅读(126) 评论(0) 推荐(0) 编辑
摘要: 1.mouseenter 和mouseover的区别 当鼠标移动到元素上时就会触发mouseenter 事件 类似 mouseover,它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter 只会经过自身盒子触发 之所以这样,就是因为mouseen 阅读全文
posted @ 2020-10-03 22:42 행운의소녀 阅读(191) 评论(0) 推荐(0) 编辑
摘要: 1.元素滚动 scroll 系列 1.1. scroll 概述 scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 1.2. 页面被卷去的头部 如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被 阅读全文
posted @ 2020-10-03 22:39 행운의소녀 阅读(179) 评论(0) 推荐(0) 编辑
摘要: 1. 元素可视区 client 系列 1.1 client概述 client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 1.2. 淘宝 flexible.js 源码分析 立即执行 阅读全文
posted @ 2020-10-03 22:34 행운의소녀 阅读(124) 评论(0) 推荐(0) 编辑
摘要: 1. 元素偏移量 offset 系列 1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位 offset 系列常用属 阅读全文
posted @ 2020-10-03 22:31 행운의소녀 阅读(241) 评论(0) 推荐(0) 编辑