欢迎关注我的公众号：前端侦探toggle的意思很简单，表示“切换”，适用于两个状态之间的变化，不会出现第三者，就像这样web 中也有很多类似的api，一起看看有哪些吧一、toggle首先是最常用的DOMTokenList.toggle方法，这里的的DOMTokenList表示一组空格分隔的标记，最常见的就是Element.classList，比如除了classList还有r...

在数据驱动视图的框架下，你最头疼的事情是什么？没错，就是获取dom。大部分业务逻辑都可以在数据层面进行处理，但有些情况就不得不去获取真实的dom，比如获取元素的宽高

相信大家平时在vue或者react中都碰到过“跨组件”通信的需求，通常我们需要将数据放在一个公共的父级上，然后用context之类的方式传递下去，或者借用pinia这样的开源库去更好的管理这些数据。

欢迎关注我的公众号：前端侦探大家可能都知道 dom 有一个 scrollIntoview方法，它可以轻易的让目标元素滚动到可视范围之内，而无需手动计算偏移量 {代码...} 效果如下这样跳转比较生硬，因此可能还知道有这样一个参数 {代码...} 这样就能平滑滚动了仅仅只有这些了吗？其实还可以做很多一、重新学习 scrollIntoView 语法...

Android 里一般称之为共享元素（shareElement）动画，也就是动画前后有一个（或多个）相同的元素，起到前后过渡的效果，可以很清楚的看到元素的变化过程，而并不是简单的消失和出现。

欢迎关注我的公众号：前端侦探提到 popover，相信大家都很熟悉，没错，就是组件库里经常见到的悬浮层（或者叫“气泡卡片”），比如 Ant Design现在，这个好用的特性终于在Chrome 114上正式支持了~下面花几分钟快速了解一下吧一、popover 属性其实这个名称以前叫做popup，后来才更改成了popover😂。popover是一个全局属性。...

介绍一个比较前沿但是非常有用的新特性：一个浏览器原生支持的 CSS 文本高亮高亮功能，官方名称叫做 CSS Custom Highlight API，有了它，可以在不改变 dom 结构的情况下自定义任意文本的样式，例如

很多时候，在使用 Canvas 绘制圆角矩形都是一件比较麻烦的事，因为之前并没有直接的方法，只能通过直线和圆弧间接组合而成，下面是一个常规绘制方式

平时工作中很多场合都要用到定时器，比如延迟加载、定时查询等等，但定时器的控制有时候会有些许麻烦，比如鼠标移入停止、移出再重新开始。这次介绍几个借助 CSS 来更好的控制定时器的方法，一起了解一下吧，相信可以带来不一样的体验

欢迎关注我的公众号：前端侦探众所周知，Windows和macOS的滚动条在默认情况是不一致的，最显著的区别就是 macOS滚动条是不占据屏幕尺寸的，如下而Windows下是这样的很多设计师会吐槽Windows滚动条不太美观，能不能自定义成macOS那样呢？当然也是可以的！一起看看吧一、自定义滚动条外观考虑到桌面端现在已经是-webkit-的...

欢迎关注我的公众号：前端侦探在很多客户端应用程序中，一般会通过应用图标的角标来显示当前消息的数量，例如其实，web 中也有类似的设定，花两分钟了解一下吧一、navigator.setAppBadge现在的navigator早已不是以前的navigator了，印象中的navigator通常用于获取设备的信息，浏览器发展这么多年，现在navigator也赋予了...

欢迎关注微信公众号前端侦探温馨提示：在阅读本文之前，可以先回顾这篇文章：Web 中的“选区”和“光标”，有很多你可能不太知道的原生 API，以下内容是对该内容的实践运用在写作编辑中，有很多需要成对出现的标点符号，比如引号、括号、书名号等，如下所示：为了方便输入，某些输入法自带了标点自动配对功能。什么意思呢？...

欢迎关注微信公众号： 前端侦探在 web 开发中，经常会碰到需要拖拽的场景。为了更好的体验，拖拽区域需要有一定的变化提示，告诉用户："现在可以放在这里了~"，例如这样的之前在这篇文章讲述了如何自定义 drag 样式，这次接着探索一下如何自定义 dragover 样式。一、dragenter 和 dragleave要实现这样的效果，少不了和dr...

欢迎关注我的公众号：前端侦探在 web 中，图片默认是可以拖拽的，通常是一个半透明的预览图（下面简称“预览图”），如下这个预览图是系统自动生成的，一般无法进行自定义，但有时候会觉得拖拽的预览图尺寸太大了，不方便放置，例如在这种场景下这是一个拖拽图片保存的功能，需要将图片拖拽至指定区域触发保存操作。由于拖...

欢迎关注我的公众号：前端侦探最近在项目中需要做一个标签输入框，还挺实用的，演示效果如下主要交互要求是这样的点击输入框可以输入内容按回车可以生成标签按退格键可以删除标签点击标签上的关闭按钮可以删除标签习惯了各种 react 框架或者UI库，大家有多久没接触没有原生开发了呢？有时候页面比较简单，没必要引入一个...

欢迎关注微信公众号：前端侦探练习 CSS 一个很好的方法就是绘制各式各样的 UI，比如这样一个时钟？你也可以访问这个 CSS clock查看实际效果CSS 绘制这样一个布局有几个难点：环形排列的刻度环形分布的数字自动运行的指针下面就来一一实现它，相信能学到很多 CSS 绘制和动画的小技巧一、环形排列的刻度提到“环形”，可以想...

在 web 开发中，有时不可避免会和“选区”与“光标”打交道，比如选中高亮、选中出现工具栏、手动控制光标位置等。选区就是用鼠标选中的那一部分，通常是蓝色

偶然在某思看到这样一个问题，如何使一个div的部分区域变透明而其他部分模糊掉？，最后实现效果是这样的进一步，还能实现任意形状的镂空效果鼠标经过的地方清晰可见，其他地方则是模糊的。可能一开始无从下手，不要急，可以先从简单的、类似的效果开始，一步一步尝试，一起看看吧。一、普通半透明的效果比如平时开发中碰...

今天来看一种十分常见的交互：提示框（tooltips）。通常提示框都是纯色的，比如下面这个这类布局实现还不算复杂，可以用一个圆角矩形和一个小三角拼接形成，设置相同的颜色就可以了这个并不是本文的重点，有兴趣的可以访问 css-tips (codepen.io)有时候，为了突出强调产品的特点或者为了跟随设计的潮流，设计会用上渐变...

拖拽的实现 在HTML5还未普及之前，实现元素的拖拽还算是一件比较麻烦的事，大概思路就是监听鼠标移动相关事件，下面是伪代码 {代码...} HTML5新增了拖放draggable标准，拖拽就变得简单了，只需要通过监听元素的拖放事件就能实现各种拖放功能。 {代码...} 除了设置draggable="true"属性外，默认情况下img、链接默认是可拖...

可以说是一个经常要用到，很少人会主动去实现的一个组件，毕竟实现起来还是要一定的时间的，所以平时工作之余就可以试着打造一些基础组件库，既可以锻炼自己的基本功，又可以为公司为社区做贡献~

分页组件（有些可能叫做翻页组件）应该是一类比较常见的组件了，适用于数据比较多的情况。比如思否的问答页面： 结构比较简单，通常包括上一页、数字页面、下一页等功能，有些可能还会包含输入指定页码跳转、切换每页条数功能。 xy-pagination xy-pagination是xy-ui新增了一类组件，主要解决分页问题，下面简单介绍一下...

form表单元素大家可能都用到过，除了可以提交表单外，还有一些内置的表单校验，比如require、minlength、maxlength，还有各种类型的input，比如type=email可以校验是否是邮箱类型，如果不满足还可以使用pattern进行正则校验。

html5表单元素input新增了一个color类型，也就是颜色选择器。 {代码...} 该选择器在windows上的默认效果如下： 可以说非常难看并且难用了。 为了解决这个问题，xy-ui新增了一类组件xy-color-picker，效果如下： 设计参考chorme颜色选择器。 是不是从视觉上就提升了一大截呢 下面来看看具体使用。 建议查看文档，可以实时...

原生img的痛点 最近，xy-ui新增了一类组件xy-img，主要目的是为了代替原生img标签，解决了原生img在使用时通常会用一些问题 加载失败的默认显示 无法直接设置图片比例 无法懒加载（最新chrome可能支持，不完善） 无法点击查看大图 下面来看实际使用： 建议查看原文，可以实时交互 使用方式 使用方式很简单 {代码...} 或...

xy-ui xy-ui是一套使用原生Web Components规范开发的跨框架UI组件库。查看文档 风格参考Ant Design、Metiral Design。 github项目地址 文档 该文档基于docsify动态创建，文中所有组件均为可交互实例。 现集成gitalk评论系统，有相关问题可在下方评论区留言。 特性 跨框架。无论是react、vue还是原生项目均可使用。 组件...

CSS是一门很神奇的语言，很多和它不相干的功能却能起到很显著的效果，有些在js看起来实现都有一定的工作量，CSS一句属性就能轻而易举的解决，下面来看几个例子（主要和js事件相关）。

这是一个纯css实现的红白机模拟器，没有使用到任何图片，如下图所示 同时支持移动端横竖屏模式 竖屏 横屏 项目地址 [链接] 下面对该样式中的疑难点总结一下。 反向圆角 这一部分采用radial-gradient完成 {代码...} 也就是从transparent到#da4a4a的渐变，这里的临界值没有完全重叠，重叠会在谷歌浏览器产生一个很明显的锯...

项目地址 [链接] 概要 这是一个半自动化的键盘访问解决方案，主要适用于需要完全键盘操作场景，比如大屏展示，电视，游戏菜单等，大大简化按键操作的逻辑。 焦点使用虚拟焦点，也就是通过添加.focus等class实现，而不是原生自带的:focus，更利于定制化需求。 基于HTML页面。 比较冷门，键盘交互方向，不感兴趣的可以跳过...

电影天堂React Native 客户端 重新开始！ 具体更新以[链接]为准。 重新开始 两年前发布了第一个版本。 现在， 使用最新的react-native 0.57和全新的设计完成了V2.0 免责声明 本项目仅供学习交流使用，不得用于其他商业行为，数据来源于第三方网站，与本人无关 为什么要重新开始呢 有很多小伙伴发邮件问我为什么之前的项...