“JS实例”目录存档

我是如何通过CSS向JS传参的

2020年02月13日,星期四

头图占位图

介绍两种我常用的将CSS媒体查询信息传递给JS的方法,一种是伪元素+content属性发,一种是CSS var自定义属性方法,这样传参有助于降低开发成本,让CSS和JS在一些条件信息上保持一致。

阅读全文…

如何使用JS把相对地址变成绝对地址?

2020年01月17日,星期五

文章头图

本文介绍两种把相对路径变成绝对路径的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进行辅助处理……

阅读全文…