🌟纯前端如何实现Gif暂停、倍速播放🌟
前言 我相信大家都不会陌生，由于它被广泛的支持，所以我们一般用它来做一些简单的动画效果。一般就是设计师弄好了之后，把文件发给我们。然后我们就直接这样使用： 这样就能播放一个 ，不知道大家有没有思考过一个问题？在播放 的时候，可以把这个 暂停/停止播放吗？可以把这个 倍速播放吗？听起来是很离谱的需求，你为啥不直接给我一个视频呢？ anyway，那我们今天就一起来尝试实现一下上述的一些功能在 的实现。 ImageDecoder 首先先来了解...
MutationObserver
是一个在浏览器环境中一种用于监听DOM变化的JavaScript API，它可以用于监听 DOM 树中指定节点及其子节点的变化，当节点内容、属性、子节点结构等发生改变时，它可以及时检测到并触发回调函数。这对于前端开发来说非常有用，可以被用来监控 DOM 变化、异步数据加载和自定义组件等场景。 基本用法 上面的代码创建了一个 实例，并将其绑定到一个目标节点上。当目标节点或其子孙节点发生变化时， 实例会调用传入的回调函数，其中参数 是一个...
一篇弄清楚JavaScript中的 this到底指向谁
为什么要有this 1.为了让对象中的函数有能力访问对象自己的属性。 例子 如果我们想要在对象内部方法中使用对象内部的属性，就像图中的代码，它是可以在C语言里运行的，但是在JS中不可行，JS它需要使用this机制来访问（图中的myName） 2.this可以显著的提升代码质量，减少上下文参数的传递。 这种显示传参的方法有点啰嗦，如果我们采用this的话，那么就会优雅，方便很多。 运行结果是一样的 this的使用场景 可以产生作用域的地方...
不用 JS，轻松锁定页面滚动！
那么，该如何锁定页面的滚动呢？ 一、传统的实现方式 传统的方式其实也不复杂，就是在打开弹窗时阻止滚动就行了，通常是改变 属性 \ 如果是在现代框架里，比如 ，可以用监听弹窗状态来实现 这样就能锁定滚动了 二、传统方式的局限 虽然上面的实现看似完美，其实还有潜在问题的。比如有多个弹窗，弹窗覆盖的情况下，这个时候锁定就会出问题了。 因为在关闭第二个弹窗的时候，页面已经解除锁定了，所以在第一个弹窗还在的时候，页面已经可以滚动了 如果想要优化这...
如何使用CSS混合模式和SVG来动态更改产品图片的颜色
今天跟大家分享一个与业务场景紧密结合的案例，即动态更改产品图片的颜色，它非常适用于诸如美妆的应用中。我曾在《 》小册的《 》和《 》小册的《 》中介绍了多种不同方式实现动态更改产品图片颜色的技术方案。今天，在这里，我将向大家分享如何使用 CSS 混合模式和 SVG 来实现。如果感兴趣，请继续往下阅读： 使用CSS混合模式和SVG来改变沙发颜色案例 我们接下来要实现的效果如下： Demo 地址： 是不是很有意思。其实在实际场景中也有类似的...
如何实现元素的曝光监测
我们是 ，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：霁明 一些名词解释 曝光 页面上某一个元素、组件或模块被用户浏览了，则称这个元素、组件或模块被曝光了。 视图元素 将页面上展示的元素、组件或模块统称为视图元素。 可见比例 视图元素在可视区域面积/视图元素整体面积。 有效停留时长 视图元素由不可见到可见，满足可见比例并且保持可见状态的持续的一段时间。 重复曝光 在同一页...
20 个好看又酷炫的 404 页面【附源码】
代码地址：https://codepen.io/Jarowe/pen/KNYxKe 代码地址：https://codepen.io/vineethtrv/pen/YqeBVJ 代码地址：https://codepen.io/ZonFire99/pen/EaYmGV 代码地址：https://codepen.io/rennan/pen/ngKJRg 代码地址：https://codepen.io/dan10gc/pen/bLYBQJ 代码...
ssh登陆报错“IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!“问题原因及解决方法
最近给 重装完固件连接时发现ssh报错，如下 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! 警告：远程主机标识已更改！ 这个报错主要是因为远程主机的ssh公钥发生了变化，两边不一致导致的 删除本地对应ip的在known hosts相关信息 删除之后重新连接，成功！
Ubuntu 一站式 Zsh 和 Oh My Zsh 安装配置指南
本文介绍了如何在Ubuntu系统上安装和配置zsh和oh my zsh，包括基本安装步骤、配置插件等操作。提高终端的使用效率和定制性。 步骤一：安装 Zsh 安装Zsh前，需要更新Ubuntu的包列表： 接下来，安装Zsh 验证安装： 步骤二： 安装 oh my zsh 使用一行命令安装 也可以手动脚本安装 步骤三： 装插件 安装插件 安装自动补全插件和语法高亮插件以提高命令行的效率和易用性。 启用插件 编辑 文件以启用下载的插件。 在...