PC端网页特效
关注
分享
扫一扫
文章平均质量分 87
记录网页特效的相关知识点
十八岁讨厌编程
没事就喜欢画思维导图
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
动画函数封装
文章目录动画实现原理动画函数简单封装动画函数给不同元素记录不同定时器缓动效果原理动画函数多个目标值之间移动动画函数添加回调函数动画函数封装到单独JS文件里面 动画实现原理 核心原理：通过定时器 setInterval() 不断移动盒子位置。 实现步骤： 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位，才能使用element.style.left 例如： <body> <div></div原创 2022-03-31 17:25:28 · 370 阅读 · 0 评论 -
元素滚动 scroll 系列
文章目录元素 scroll 系列属性页面被卷去的头部案例：淘宝固定右侧侧边栏页面被卷去的头部兼容性解决方案 元素 scroll 系列属性 scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 页面被卷去的头部 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件 我们可以拿以下代码进行实验： <style原创 2022-03-31 15:23:35 · 1284 阅读 · 0 评论 -
元素可视区 client 系列
文章目录什么是client立即执行函数淘宝 flexible.js 源码分析 什么是client client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 立即执行函数 立即执行函数语法： (function() {})() 或者 (function(){}()) 主要作用： 创建一个独立的作用域。 避免了命名冲突问题 例如： <script> // 1原创 2022-03-31 14:39:52 · 467 阅读 · 0 评论 -
元素偏移量 offset 系列
文章目录offset 概述offset 与 style 区别 offset 概述 offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 返回的数值都不带单位 offset 系列常用属性： <body> <div class="father"> <div class="son"></div> &原创 2022-03-31 14:03:57 · 703 阅读 · 0 评论