快速实现一个颜色选择器
-
在做前端界面开发的时候,遇到需要改变颜色的需求,就需要使用颜色选择器。针对这个问题,第一想法,自然是H5提供了input color,可以实现。但不出意外的,IE并不支持。而且,chrome的实现方式和firefox也会不太一样。
而chrome和Firefox的差异也十分明显,chrome浏览器自身实现的就是一个颜色的选择器控件,而Firefox实现的是引入一个操作系统自带的颜色选择器控件。而针对这些差异性,就很有必要实现一个统一的颜色选择器组件,譬如我们来实现一个类似chrome浏览器自带的这种选择器。
我们前端开发,最常见的颜色模型就是RGB,即红绿蓝三基色模型,而前端浏览器能支持颜色显示的颜色模型只有两种:RGB和HSL。
而HSV 与 HSL 的区别在于HSV是基于色相H(hue)、饱和度S(saturation)、明度V(Value);HSL基于色相H(hue)、饱和度S(saturation)、亮度L(lightness)。其中色相是一样的,本质都是一种颜色值。在这两个模型中,色相是以六大主色为基础,分别按60度的间隔排列在圆环上。
色相:色相的原理在于HSV和HSL一样。落实到代码层面的话,也是很好实现的,以css和div的方式,只需要进行颜色的线性渐变即可:颜色面板一般是一个长方形的区域,以HSV为例。当然,饱和度和明亮度在水平或者垂直方向上是可以调换的。
西南地区IT社群(QQ)
- 云南
- 【昆明网页设计交流吧】243627302
- 【昆明nodejs交流吧】 243626749
- 【VUE】838405306
- 【云南程序员总群】343606807
- 【昆明UI设计】104031254
- 【云南软件外包】15547313
- 贵州
- 【PHP/java源码/站长交流群】55692114
- 四川
- 【成都Java/JavaWeb交流】86669225
- 【vaScript+PHP+MySql】116270060
- 【UI设计/设计交流学习群】135794928
- 重庆
- 【诺基亚 JAVA游戏博物馆】 559479780
- 【PHP,Java,Python,C++接单】 442103442
- 西藏