“JS实例”目录存档

JS检测CSS属性浏览器是否支持的多种方法

2019年11月8日,星期五

我所知道的几种方法

CSS.supports()是一种非常不错原生方法,但IE11及其以下浏览器不兼容,此时可以试试先赋值在取值的检测方法,记住getComputedStyle方法或者setAttribute style属性赋值,都是可以的,是我实际开发经常使用的方法。

阅读全文…

实现a元素href URL链接自动刷新或新窗口打开

2019年10月13日,星期日

新窗口智能打开占位图

有个前端都必须知道的体验增强小技能,就是优化新窗口打开的交互体验,已经打开的页面直接刷新,不在重复开选项卡标签页,如何实现呢?其实很简单,并不需要JS的参与,HTML本身特性就可以实现这样的需求。

阅读全文…

浏览器IMG图片原生懒加载loading=”lazy”实践指南

2019年09月30日,星期一

原生懒加载头图封面图

本文介绍自己在研究与实践Lazy loading原生懒加载得到的结论与知识,scroll滚动,resize缩放,网速,屏幕高度都是影响特性,同时也会介绍在JavaScript中的一些实用tips。

阅读全文…

纯前端JS zip打包文件并下载

2019年08月17日,星期六

zip压缩与下载

本文主要介绍如何使用jszip这个开源项目纯前端打包并下载ZIP文件,顺便介绍下FileSaver.js这个非常强悍的纯前端下载JS。

希望本文内容能够解决你项目中遇到的问题。

阅读全文…

给IE/Edge写了个textarea resize拉伸的polyfill

2019年08月7日,星期三

IE/Edge直到叛变到Chrome内核之前,都没有支持CSS resize拉伸,为了让IE/Edge浏览器也能享受CSS resize全身拉伸的quick感,于是我抽空写了个polyfill,效果还不错。

阅读全文…

HTML静态页面原型交付工具“魔卡”简介

2019年07月19日,星期五

如果你的主要工作内容就是重构HTML静态页面,则本文介绍的“魔卡”工具会很适合你。头尾公用,支持简易CSS变量,支持http服务以及JS,CSS合并,都是专门为HTML静态页面开发定制的功能。本工具极简免安装,非常轻量。

阅读全文…

CSS滤镜和混合模式处理的图片如何上传下载?

2019年04月20日,星期六

CSS处理图形合成真图像

使用CSS滤镜和混合模式可以实现很多很酷的图像处理效果,但是处理后的美图用户无法下载,也无法上传,因为此时的图片资源还是原图,有没有什么方法可以得到CSS技术处理后的图像呢?

阅读全文…

CSS scroll-snap滚动事件停止及元素位置检测

2019年04月20日,星期六

scroll snap头图

CSS Scroll Snap是个非常好用的特性,可以让滚动停止的时候,无需任何JS代码,自动平滑定位到指定元素的指定位置。但实际开发的时候,发现很多场景还需要知道滚动什么时候停止,以及到底滚动到哪个元素上,浏览器目前还没有原生的方法支持,需要我们使用JS进行辅助处理……

阅读全文…

粉丝群第27期JS基础小测答疑文字版

2019年01月20日,星期日

小测头图

讲讲JS正则表达式二三事,以及在这基础上制作的可视化工具,再讲讲不使用正则的傻白甜实现方法,并以此延伸一点关于技术人员职业发展的事情。

阅读全文…

使用wavesurfer.js显示mp3 audio音频的波形图

2018年12月9日,星期日

波形图

如果你想实现右图所示的波形图效果,可以借助wavesurfer.js。wavesurfer.js上手简单,扩展丰富,有多达35个可选参数,什么音频速率控制,波形图大小尺寸啊,都完全不在话下。还有好多种方法,对了,还有很多额外的插件,丰富的使用案例。

基本上,你要想对音频进行解析,显示个图形啥的,不要多想了,就wavesurfer,童叟无欺,老少皆宜,居家旅行,开发必备。

阅读全文…