数学标记语言MathML简介、工具及兼容

2018年10月24日 by 张 鑫旭 阅读 10063 次, 今日 4 次

MathML头图缩略图

MathML指“数学标记语言”,是XML语言的一个子集,用来在web网页,甚至部分软件中显示数学公式。

简言之,就是使用特殊的类似HTML的标记在网页中显示数学公式。因为有些数学公式很复杂,普通HTML根本没法驾驭,然而MathML本身也很复杂,真要手写那真要人命了,好在有很棒的工具可以帮助我们……

阅读全文…

有人考了我一道CSS题目

2018年10月21日 by 张 鑫旭 阅读 16256 次, 今日 9 次

考我一道CSS题目

前段时间@快叫我韩大人私信我考了我下面这个CSS题目:在不改变HTML结构,同时保留元素高度前提下,实现某一个布局效果……我觉得还挺有意思的,在征得其同意的前提下输出了这篇文章,大家若有兴趣,也可以进来看看,自己能不能实现相关需求。

文中提供了可实时编辑预览效果的demo,方便大家尝试自己思路。

阅读全文…

CSS scroll-behavior和JS scrollIntoView让页面滚动平滑

2018年10月21日 by 张 鑫旭 阅读 26495 次, 今日 35 次

浏览器原生平滑滚动缩略图

从去年年底开始,浏览器已经开始支持的原生平滑滚动定位,CSS scroll-behavior属性和JS scrollIntoView()方法都可以。本文就将捋一捋这些平滑滚动新特性的使用方法,实际效果,以及如何在实际中应用等。一如既往,丰富配图,含GIF演示和视频截屏,必要的源代码展示和详尽的demo,希望本文内容能够对您的学习有所帮助。

阅读全文…

CSS :visited伪类选择器隐秘往事回忆录

2018年10月12日 by 张 鑫旭 阅读 7895 次, 今日 3 次

头图

CSS :visited伪类选择器你以为很简单,麻鸭,估计是所有伪类选择器里面最不简单,最怪异的了。很多奇怪的特性你想都想不到,进来看看,一定会有别样的收获的。

阅读全文…

搞懂SVG/Canvas中nonzero和evenodd填充规则

2018年10月3日 by 张 鑫旭 阅读 9744 次, 今日 10 次

nonzero evenodd缩略图

只要是路径填充,都有两种规则,nonzero和evenodd,无论是SVG中的路径填充,还是Canvas中的路径填充,如果还有其他和路径相关的技术(甚至设计软件),也离不开这两种填充规则。换句胡说,这是超越各种语言,普世通用的技能点。下面,看看我能不能用足够精简的语言,尽可能让大家都搞懂这两种路径填充规则。

阅读全文…

拖拽献祭中的黑山羊-DataTransfer对象

2018年09月30日 by 张 鑫旭 阅读 16621 次, 今日 12 次

解构datatransfer对象

伟大的安兹·乌尔·恭释放了一个超位魔法——拖拽献祭中的黑山羊魔法!凡是不能手写页面元素拖拽效果者,即死,需10日才能复活!顿时,无数前端手足无措,惊恐万分,仓皇而逃,但终究难逃一死。此时,一位小白前端横空出世,靠着解构此魔法的关键DataTransfer对象,破解了这个超位魔法,挽救了无数的前端开发,而其破解的详细信息已经记录在这篇文章中……

阅读全文…

直接剪切板粘贴上传图片的前端JS实现

2018年09月21日 by 张 鑫旭 阅读 19287 次, 今日 16 次

剪切板上传图片缩略图

可能有小伙伴并不知道,在网页中,我们直接Ctrl+V也是能够上传图片的。诶?真有这么厉害?没错,就是这么厉害!要不进去瞅瞅,现成的源代码,高保真的demo,包你分分钟学会这种姿势,哦,不,知识!

阅读全文…

利用剪切板JS API优化输入框的粘贴体验

2018年09月9日 by 张 鑫旭 阅读 15313 次, 今日 13 次

剪切板粘贴优化缩略图

输入框输入内容我们有时候为了方便,会直接粘贴内容,例如IP,网址,或者陌生人的手机号。但是,有时候我们复制的内容包含冗余信息,或者格式不准确,还需要重新编辑,体验就不好了。实际上,我们可以直接控制剪切板里面的复制的文字内容,可以实现粘贴的数据是我们希望的准确的数据格式,省去用户重新自己编辑的麻烦,可以有效提升用户的交互体验。

具体该如何实现呢?请看本文的介绍以及可以直接复制粘贴就可以使用的JS代码。

阅读全文…

借助wbr标签实现连续英文字符的精准换行

2018年09月1日 by 张 鑫旭 阅读 14240 次, 今日 2 次

文章头图

在web网页中,连续英文单词默认是不换行的,使用word-break虽然能够有效,但是,会有一个很明显的问题,这换行的位置把英文单词直接破开了,可读性下降。有没有什么方法,技能换行,又不破坏单词呢?可以试试HTML中的wbr标签。

阅读全文…

妙法攻略:渐变虚框及边框滚动动画的纯CSS实现

2018年08月30日 by 张 鑫旭 阅读 21007 次, 今日 11 次

本文内容如题,介绍几个实现渐变虚线框的方法,介绍虚线滚动动画,实线滚动边框动画的实现,所有这些方法都是纯CSS实现,就算这些动画效果你实际项目用不到,但是其大开眼界的实现原理相信也会给你有所启示的。

一如既往,有demo实例,有源代码展示,和必要的截图,希望本文的内容能够对您的学习有所帮助。

阅读全文…