Everything you care about in one place
Follow feeds: blogs, news, RSS and more. An effortless way to read and digest content of your choice.
Get Feederzhangxinxu.com
张鑫旭-鑫空间-鑫生活
Get the latest updates from 张鑫旭-鑫空间-鑫生活 directly as they happen.
Follow now 79 followers
Latest posts
Last updated 6 days ago
如何使用CSS判断鼠标从哪个方向进入元素？
6 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12118 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、且看效果 下面是我使用CSS绘制的一个人脸，如果我希望如果用户鼠标从上面进入，表情变成哭丧脸；从下方进入，变成笑脸，该如何实现？ 相关代码如下所示： <div class="face-x"> <div class="face"></div>...
借助mediabunny纯JS实现视频水印、剪裁、合成等功能
16 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12166 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、推荐使用mediabunny 大约2年前，我更新了大量的音视频处理的文章，不过里面的技术实现大都使用原生代码和WebCodecs API手搓的实现。 因为那个时候，WebCodecs API刚出来，技术还不成熟。 自然而然，就陆续出现了不少基于WebCodecs API封装的音视频处理框架。...
务必谨慎使用JS WeakRef弱引用
20 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12155 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、weak三剑客 JS语言中的弱类型除了本文要介绍的WeakRef，还有WeakMap和WeakSet，其中WeakMap我5年前有介绍过，参见“JS WeakMap应该什么时候使用”。 WeakMap和WeakSet支持很多很多年了，无需顾忌任何兼容性问题，但是WeakRef则是前几年刚支持的特性。 三者的本质区别 用一句话说明WeakMap、WeakSet和WeakRef的区别，那就是： WeakMap...
CSS六边形头像的实现与蜂巢布局
26 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12118 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 本文内容分为两啪，一个是六边形头像效果的实现，而是金字塔布局（又称蜂巢布局）的实现。 一、六边形头像 不啰嗦，直接看代码和最终实现的效果，同样的，用的是CSS corner-shape属性。 img { aspect-ratio...
CSS corner-shape与背景底纹技术
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12115 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、corner-shape之前介绍过 CSS corner-shape属性去年8月份刚刚介绍过，可以实现多种图形效果。 很强，也大开眼界。 有兴趣的可以去这里学习其语法：“大开眼界的CSS corner-shape属性” 但是这些图形效果一次只能创建一个，如果可以将这些图形效果批量复制，岂不是可以实现各种复杂的底纹背景效果。...
浅学WebTransport API：下一代Web双向通信技术
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12112 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、比 WebSocket 更懂低延迟的开发新利器 时间如斯，一转眼，做前端开发已经十五六年了，刚开始那会儿，实时通信还是使用轮询、长轮询，后来就是 WebSocket，然后现在又出来了个WebTransport。 WebSocket虽然可以解决大部分的问题，但是并不完美，例如队头阻塞、只能单一流传输、网络切换就断连，尤其是做实时游戏、直播推流这类对延迟要求极高的场景，总觉得差点意思。 所以就有了...
HTML dialog元素新支持了closedBy属性
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12102 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、长话短说 不知道大家用过<dialog>元素没有，我是使用了很多年了，挺好用的。 对于基础特性，各大浏览器都已经支持不错了。 但是，还不完美，且看下面这个场景。 请问，如果我们希望<dialog>弹框模态显示的时候，点击后面的半透明黑色蒙层关闭弹框，请问如何实现？ 在之前，这个需求需要用到JS，但是现在，只需要一个HTML属性就可以实现了，这个属性就是closedBy属性。 比方说下面这个弹框HTML元素：...
HTML interestfor属性与悬停popover交互效果
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12089 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、悬停popover也原生支持了 之前“该使用原生popover属性模拟下拉了”这篇文章有介绍过点击行为驱动的popover下拉。 最近发现，鼠标hover悬停也支持popover交互了。 且功能比点击更丰富，适用范围更广，那就是将popovertarget属性换成interestfor属性。 先看案例，HTML如下： <button interestfor="imgBook">Hover显示图片</button&gt...
点击图片放大查看交互效果的最佳实现
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12082 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、先看跟随放大效果 请看下面的MP4录屏效果（不动点击播放）： 除了视频看到的效果，相关实现还支持： ESC关闭； 地址栏回退关闭； 眼见为实，您可以狠狠地点击这里：点击缩略图以动画效果呈现大图demo 二、一步步原理说明...
JS正则表达式y标识符之粘性匹配
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12076 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、前言概述 当年我是捧着JavaScript高级语言设计这本书学习JS正则表达式的，知识基本上都停留在那个时期。 最近偶然发现，正则表达式还支持sticky粘性标识，使用字母y表示。 看了下支持的时间，距今也有五六年的时间了，已经谈不上新特性了。 趁着春节前比较有空，赶快学习一番。 二、y标识符基础常识 粘性匹配的标识符是y。...
CSS text-box属性又是干嘛用的？
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12067 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、text-box的设计初衷 在传统的 CSS 盒模型 中，文本行高（line-height）会在文字上下产生额外的“半行间距”（half-leading）。 这使得文本难以与旁边的图标或容器边缘精确对齐。如下图所示： 使用...
告别insertBefore，使用moveBefore移动DOM元素
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12051 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、新的moveBefore方法 以前我们要移动DOM元素或者Node节点都是使用insertBefore方法。 但是，insertBefore的移动是通过“删除” → “创建”实现的。 这就会有问题，包括： 元素的动画中断；...