2020年1月13日

0194 动画函数封装:动画实现原理,给不同元素记录不同定时器,缓动效果原理,多个目标值之间移动,动函数添加回调函数,动画完整版代码,京东问题反馈元素左右移动案例

摘要: 1.6.1 动画实现原理 核心原理:通过定时器 setInterval() 不断移动盒子位置。 实现步骤: 1. 获得盒子当前位置 2. 让盒子在当前位置加上1个移动距离 3. 利用定时器不断重复这个操作 4. 加一个结束定时器的条件 5. 注意此元素需要添加定位,才能使用element.style 阅读全文

posted @ 2020-01-13 19:47 冲啊! 阅读(329) 评论(0) 推荐(0) 编辑

0193 mouseenter 和mouseover的区别

摘要: 当鼠标移动到元素上时就会触发mouseenter 事件 类似 mouseover,它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发 。 mouseenter 只会经过自身盒子触发 。 之所以这样,就是因为mouseenter不会冒泡 跟mouseenter搭配鼠标 阅读全文

posted @ 2020-01-13 16:08 冲啊! 阅读(174) 评论(0) 推荐(0) 编辑

0192 offset、client、scroll 三大系列总结

摘要: 他们主要用法: 1.offset系列 经常用于获得元素位置 offsetLeft offsetTop 2.client经常用于获取元素大小 clientWidth clientHeight 3.scroll 经常用于获取滚动距离 scrollTop scrollLeft 4.注意页面滚动的距离通过 阅读全文

posted @ 2020-01-13 15:57 冲啊! 阅读(159) 评论(0) 推荐(0) 编辑

0191 元素滚动 scroll 系列:scrollTop,scrollLeft,scrollWidth,scrollHeight,window.pageYOffset

摘要: 1.3.1 scroll 概述 scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 1.3.2 页面被卷去的头部 如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被 阅读全文

posted @ 2020-01-13 12:25 冲啊! 阅读(508) 评论(0) 推荐(0) 编辑

0190 元素可视区 client 系列:clientTop,clientLeft,clientWidth,offsetHeight,淘宝 flexible.js 源码分析

摘要: 1.2.1 client概述 client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 1.2.2. 淘宝 flexible.js 源码分析 立即执行函数 (function() 阅读全文

posted @ 2020-01-13 10:34 冲啊! 阅读(250) 评论(0) 推荐(0) 编辑

导航