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 168 followers
Latest posts
Last updated about 7 hours ago
实用的JS对象分组静态方法Object.groupBy()
about 7 hours ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11357 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、原生分组方法Object.groupBy() 好消息，所有现代浏览器都已经支持浏览器原生的静态方法Object.groupBy()了，如下图所示，Safari浏览器支持最晚，今年4月份才开始支持。 这就意味着最晚明年，就算不使用Polyfill代码，也能在生产环境使用该方法了。 作用 Object.groupBy()可以让可枚举对象，根据某个键进行自动分组。 例如： const...
好消息，align-content垂直居中也适用普通元素啦
6 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=5474 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、普大喜奔好消息 好消息，实现元素垂直居中对齐终于有了专门的CSS属性，就是之前Flex布局和Grid布局中使用的align-content属性，现在已经可以在普通的block块级元素中使用啦！ 案例演示 例如，有如下CSS和HTML代码： <ul> <li>《HTML并不简单》这本书不错</li> <li>感谢正版支持《CSS新世界》</li>...
来了来了，scrollend滚动停止事件也支持了
8 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11347 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、这个特性期待已久了 之前处理滚动行为的时候，由于滚动事件的触发太频繁，所有，都会用setTimeout优化处理。 现在，浏览器支持了scrollend事件，就不需要那么麻烦了。 目前Firefox和Chrome浏览器已经原生支持，Safari的话还是需要老代码polyfill下（本文后面会有展示）。 效果体验 只要你不是Safari浏览器（手机不是iPhone），均可以滚动下面这个iframe内嵌容器，体验scrollend效果。 如果仅触摸，但是未发生滚动，scrollend事件是不会发生的。...
搞懂SVG中各种Light相关的光源滤镜
11 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11330 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 SVG中有多个与光源相关的滤镜，看起来有些小复杂，今天就好好学一学，想办法都弄懂了，说不定哪一天就用到了。 一、fePointLight滤镜 顾名思义就是点光源滤镜效果。 和很多其他光源滤镜一样，要想生效，需要用在照明过滤器元件中。 所谓的照明过滤器，在SVG中，其实指的是<feDiffuseLighting> 和 <feSpecularLighting>这两个元素。...
不能落后，好好缕缕CSS滚动动画
27 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11318 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 生命不停，学习不止，CSS滚动动画出来已经有1年了。 Safari浏览器到现在还没有支持，如下图所示： 但是我已经等不及了，很多人都已经开始在生产环境使用这个新特性了，我也不能落后，学起来，不要管Safari了。 然后，滚动动画需要的CSS属性不仅是scroll-timeline、view-timeline，animation-timeline属性也是需要的，这也是CSS新特性，会在本文一同介绍。 好，开始吧。 一、温故而知新 其实滚动动画我很多年前也近似实现过，让我找找……...
页面级可视动画View Transitions API初体验
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11308 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、先从最简单的案例开始 本文介绍View Transitions API，可以实现类似Keynote里面神奇移动这样的动画效果，也即是浏览器自动识别场景1和场景2的不同，并让这个不同产生动画效果，特别适合复杂的页面级别的场景切换动画。 先从最简单的案例开始。 一、append图片淡出动画 传统方法实现页面插入一个图片并有动画效果，需要用到CSS3...
独家，MP3音频淡入淡出播放和转换的JS实现
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11293 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、需求背景 希望特效音可以有淡入淡出效果，同时能够在视频合成的时候体现在音轨中。 二、播放淡入淡出 先讲下偏浅层应用的技术实现，那就是播放淡入淡出。 1. 使用howlerjs实现 howlerjs这个项目（https://github.com/goldfire/howler.js）我多次提到过，凡是音频播放的需求（除了那种简单的点击播放），无需任何迟疑，也不用考虑其他，就是要howlerjs。...
关于《HTML并不简单》这本书
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11275 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 前言 盼星星，盼月亮，我的第5本书《HTML并不简单》已经正式上架了。 这本书是围绕HTML这门语言展开的，可以说是市面上唯一一本专讲HTML的书籍。 而HTML诞生至今已有30多年，为何鲜有专门介绍这门语言的书籍呢？一方面是商业原因，另一方面则是从业人员对HTML的积累不足以撑起一本书籍的体量。 作为一个学习门槛低，收益周期长的语言，很少有人会花大量的时间在这门语言的研究上。 但我是个例外，工作至今已有15年，一直在一线开发，一直没有停止对前端基础语言的研究与学习，使得自己的知识储备足够支撑起一本干货满满，细节丰富，深入浅出的HTML书籍。 可以说，如果不是阅读了本书，很多实用的前端知识你恐怕这辈子都不会知道。...
今日学习CSS文本自定义高亮API
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11282 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、前前前言 生命不息，学习不止。 本周实操一下CSS Custom Highlight API。 首先，Firefox浏览器最近也支持了上述API，至此，现代浏览器完成了大统一，可以学起来了。...
了解infinity、pi等CSS calc()计算关键字
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11261 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、calc()函数支持的新关键字 CSS在不断发展，除了新支持了若干数学函数之外，还支持了一些数学关键字，且这些关键字和JavaScript中的关键字神似。 包括： e log常量，约等于：2.7182818284590452354. pi 圆周率，约等于：3.1415926535897932....
如何使用纯CSS鉴别是不是Safari浏览器
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11252 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、时代变了某些没变 Safari啊Safari，唉，不知道说什么才好。 最近做项目，又遇到了近Safari才会出现的问题，拖拽元素的时候有奇怪的残影。 包括之前也有很多问题，也都是Safari下才会出现的。 所以，就出现了对Safari专门处理下的需求。 我查了一下，居然没有专门匹配Safari的CSS的资料介绍，那就自己撸一个吧。 二、使用@supports规则进行识别...
CSS transition-behavior让display none也有动画效果
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11245 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、现状描述 有一个元素设置了display:none隐藏，然后使用JS让其实现的时候，希望同时有透明度变化的动画效果，使用transition属性是无效的。 如下代码示意： <div id="element" class="element">占位内容</div> .element...