品味前端-腾讯云开发者社区

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

品味前端

专栏成员

27

文章

32324

阅读量

16

订阅数

原生 JS 实现惯性滚动，给鼠标滚轮增加阻尼感，纵享丝滑

前端 javascript

当我们在移动终端上滑动页面，手指离开屏幕后，页面的滚动并不会马上停止，而是在一段时间内继续保持惯性滚动，并且滑动阻尼感和持续时间与滑动手势的幅度成正比。

茶无味的一天

2023-09-06

1.2K0

如何用原生 JS 复刻 Bilibili 首页头图的视差交互效果

特效 javascript 交互设计前端

最近网上冲浪的时候，发现了 B 站这个首页头图的交互效果非常有趣，如下图所示，当鼠标在画面中左右滑动时，海洋生物会栩栩如生地动起来：

茶无味的一天

2023-09-06

3090

几行代码实现上传接口，白嫖Github做为在线图床

文件上传 github 前端上传图片

事情是这样的，某天我在项目里临时需要一个图片上传接口来测试功能，简单来说就是从前端上传图片到服务器然后返回一个可访问的静态资源链接，如果为了这个而去开发一个服务端接口实在是麻烦，而对接阿里云、七牛云这类 oss 服务一样要开发而且还要钱，许多免费在线图床也不会提供 API 的功能。。

茶无味的一天

2023-08-11

5280

教你在超低配的服务器上部署令人惊叹的AI抠图工具

人工智能前端

对于一款数字时代的图片编辑工具而言，抠图工具扮演着越来越重要的角色。它能轻松地将图像中的目标与背景进行分离，为用户提供便捷高效的编辑体验。

茶无味的一天

2023-08-08

7190

开源分享 | 在线图片编辑器，支持PSD解析、AI抠图等，基于Puppeteer生成图片

图片处理 puppeteer 编辑器前端

原文链接：https://juejin.cn/post/7261774602481188923

茶无味的一天

2023-08-01

5940

对话框、模态框和弹出框看起来很相似，它们有何不同？

前端 html 移动开发网页制作

Web 平台概念有时可能完全不同，但有时看起来又非常相似。语义、行为和特征可能都很难区分。由于一个新的 popover 属性正在被提出，所以这篇文章将探讨对话框(dialogs)、弹出窗口(popovers)、叠加层(overlays)和揭示小部件(disclosure widgets)之间的区别。我们还将了解元素为 modal 时的含义。所有相关的概念看起来都非常相似，至少在我看来是这样的，那就让我们开始吧！

茶无味的一天

2023-04-22

3.4K0

聊聊 CSS 隐藏元素的 10 种实用方法

这是一个在初级 web 前端面试中可能常会提及的问题，聊这个话题不仅仅只是讨论“茴”字有几种写法，更是能从一个简单的问题中体现出你的 CSS 边界能力，本文提炼了十种最实用的方法，希望对你有所帮助。

茶无味的一天

2023-04-14

7800

如何在页面中监听“不存在”的 DOM 节点

MutationObserver 是用于监视 DOM 树内的特定节点的 Web API 接口，一旦监测到节点发生变化，就会通知回调函数执行相应的逻辑。该 API 的兼容性很好，但由于如今流行的 JS 框架都旨在“数据驱动视图”，使得这个 API 容易被大众遗忘。本文将介绍 MutationObserver 的基本原理、使用方法和应用场景，帮助读者更好地理解和应用这个灵活且强大的 API。

茶无味的一天

2023-04-14

1.2K0

Electron打包错误的踩坑小记

打包 windows https 网络安全 node.js

在网络环境不好(无科学上网)的条件下，项目可能可以启动成功却无法打包，注意查看报错信息，如下图所示：

茶无味的一天

2023-01-19

9810

原生 JS 手写一个优雅的图片预览功能，带你吃透背后原理

本文将用一个极简的例子详细讲解如何用原生JS一步步实现完整的图片预览和查看功能，无任何第三方依赖，兼容PC与H5，实现了触屏双指缩放等，干货满满。

茶无味的一天

2022-11-02

2.5K0

如何用 JavaScript 编写你的第一个单元测试

单元测试腾讯云测试服务 node.js json npm

测试代码是确保代码稳定的第一步。能做到这一点的最佳方法之一就是使用单元测试，确保应用程序中的每个较小的功能都按应有的方式运行——尤其是当应用程序接收到极端或无效输入，甚至可能有害的输入时。

茶无味的一天

2022-11-01

1.1K0

如何优雅地编写一个高逼格的JS插件？

json npm jquery 打包 javascript

在一个风和日丽的早晨，我正悠闲地喝着Coffe，突然领导向我走来，我赶紧熟练地切出VSCode，淡定自若地问：领导，什么事？领导拍了拍我的肩膀：你上次封装的方法同事跟我反馈使用起来很不错啊，你不如做成JS插件给大家用吧。我放下了手中的马克杯，甩了一下眼前仅剩的几根刘海：没问题啊，小Case！随即开始摸鱼....

茶无味的一天

2022-10-09

1K0

这道JS经典面试题不要背，今天带你彻底搞懂它！

这是一道非常经典的面试题，涵盖了从函数的基本概念、运算符优先级，到作用域链、原型链、this关键字、new关键字等基础知识点考察，可以说能完整答对 JS 基础才算过了关，本文就带大家回顾并剖析这道面试题，应该是全网最详细的文章了，这次彻底搞懂它。

茶无味的一天

2022-10-08

4450

学会一行CSS即可提升页面滚动性能

一般情况下 CSS 并不会影响 JS 事件，但有一个 CSS 属性则比较特殊，那就是 pointer-events，它可以用来规避鼠标事件，其中大部分属性值只适用于 SVG（可缩放矢量图形）操作，而我们只需要关注其 none 属性值，该值表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

茶无味的一天

2022-10-08

3.1K1

JS探究之call和apply到底哪个更快？

ios babel.js 腾讯云测试服务

我们都知道 call() 和 apply() 是用来改变函数中 this 指向的，它们的共同点是都会立即执行，而如果问到它们之间有什么区别时，我们都会想到一个「传参不同」

茶无味的一天

2022-10-08

4810

当UI走查说页面色值错误时，先别急着检查代码

颜色一直是UI设计师们非常敏感的问题，我至今仍忘不了那天，一位萌新设计师在走查UI时，给我提了好几个Bug，大多是颜色有差异问题，我当时的第一反应是去检查代码，排查了半天确认自己没有写错色值后，我就在想会不会是取色的问题？于是我做了个试验，在网页上设置一个背景色，然后用Chrome自带的取色器吸了一下这个背景色，结果差点令我怀疑人生：

茶无味的一天

2022-10-07

6100

Vue实现无限级树形选择器（无第三方依赖）

编程算法 vue.js jquery

想要在 Vue 中实现一个这样的无限级树形选择器其实并不难，关键点在于利用递归组件和高阶事件监听，下面我们就一步步来实现它。

茶无味的一天

2022-10-07

8760

如何编写一个原生 Web Components 组件

html 网站 vue.js

在今天的前端编程中，利用语义化的 HTML 结合 CSS 来完一个组件并不是一件难事，这也意味着无论在 React、Vue 中都可以插入，不过它俩不是今天的主角，接下来我将用一个例子来介绍如何封装一个完整的原生 HTML 的 Web Components 组件，让我们开始吧！

茶无味的一天

2022-10-07

6790

面试官：哪些浏览器事件不会冒泡？

javascript jquery

回答这个问题之前，我们首先要具备DOM事件流捕获与冒泡的知识，这里只讲JS中如何设置这两种事件监听，例如对body注册点击事件：

茶无味的一天

2022-10-07

1.7K0

在Chrome浏览器中最快速实现拾色器（颜色吸管）的方法

canvas svg electron

说到网页拾色器（颜色吸管工具）在前端的实现方法，通常我们会想到先进行网页截图，然后通过Canvas绘制截图，此时利用Canvas所提供的的API即可解析出图片每个像素点颜色，最后通过获取鼠标定位，得到当前的坐标来进行颜色选择。

茶无味的一天

2022-10-06

1.6K0

点击加载更多

社区活动

【纪录片】中国数据库前世今生

穿越半个世纪，探寻中国数据库50年的发展历程

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态