“JS相关”目录存档

尝试使用JS IntersectionObserver让标题和导航联动

2020年12月1日,星期二

南瓜封面图

学习了下JS中非常适合实现懒加载和无限固定加载的IntersectionObserver API,并自己给自己出难题,使用此API实现基于文档标题生成导航的插件功能。本文有自己实现过程完整记录,不一样风味的技术文章,内容较长,希望可以对大家学习有所启发。

阅读全文…

突发奇想,同步单复选框checked态岂不点击通杀?

2020年11月26日,星期四

思考的狐狸,突发奇想的张鑫旭

利用浏览器单复选框原生点击的特性,抽象出一个实时同步规则,无需针对每一种交互效果去写具体的代码,就可以实现全覆盖的点击交互事件增强支持,可谓一本万利,大家不妨进来看看到底香不香。

阅读全文…

ES6模板字符串在HTML模板渲染中的应用

2020年10月22日,星期四

模板字面量HTML渲染

ES6模板字符串自带模板解析特性,有没有可能HTML模板直接使用ES6模板字面量语法,然后进行渲染解析呢,这样就不需要引用第3方模板渲染引擎了,岂不妙哉!但是实操下来没那么简单,好在我找到了一个解决方法。本文的技术同样实用,有demo有截图,希望本文内容可以对您的学习有所帮助。

阅读全文…

巧借CSS var变量实现任意的CSS自定义语法

2020年10月11日,星期日

CSS变量的自定义语法技术

本文介绍一种自定义任意CSS语法、以及Polyfill CSS新特性的技术,这个技术的精华之处就是巧用CSS变量var让这些浏览器本不应该识别的语法也认为是合法的,从而让JS进行解析识别与转化成为了可能,本文通过3个案例演示该技术,希望可以对您的学习有所帮助。

阅读全文…

Polyfill吊炸天的CSS attr()新语法

2020年10月10日,星期六

poly小狗 attr()函数 CSS

CSS attr()新语法可以让HTML属性以任意的CSS属性值类型呈现,足矣对现有的web开发产生颠覆,但是可惜这么好用的东西目前没有任何浏览器支持,本文会介绍我自己找到的一种Polyfill方法,可以让所有支持CSS变量的浏览器都可以使用attr()新语法。

阅读全文…

JS CustomEvent自定义事件传参小技巧

2020年08月20日,星期四

CustomEvent自定义事件传参

本文介绍如何使用CustomEvent.detail触发addEventListener绑定的内置或自定义的事件并传参,以及IE浏览器不支持的解决方法。

阅读全文…

JS纯前端实现audio音频剪裁剪切复制播放与上传

2020年07月27日,星期一

音频在线剪辑与处理

本文演示了如何纯前端对MP3、WAV、OGG等格式音频进行剪辑、剪裁、剪切、复制、播放以及上传等处理,使用Web Audio API,有完整的代码,还有在线demo演示页面,即插即用,希望本文内容可以对你的工作有所帮助。

阅读全文…

移动端双指缩放图片JS事件的实践心得

2020年06月12日,星期五

双指缩放示意图

今天要JS实现一个手机中双指缩放的需求,本以为很简单,结果遇到了意料之外的状况,特意记录下来和大家分享,有demo演示,也有精简的JavaScript代码,以后说不定用得到,可以mark下。

阅读全文…

ES6 Math方法和Number新特性简介

2020年04月16日,星期四

不错的情侣封面图

ES6 新增了很多Math方法,扩展了一些Number新特性,本文就对相关知识进行的整理和说明,希望可以对您的学习有所帮助。

阅读全文…

检测DOM尺寸变化JS API ResizeObserver简介

2020年03月8日,星期日

头图占位图

JS ResizeObserver这个全新的API可以用来观察与检测DOM元素尺寸的变化,很多以前不好实现的需求这下有了高性能高质量的解决方案了。

阅读全文…