当前位置：首页 > 网页特效 > 颜色拾取器

简单实用的jQuery颜色选择器插件

分类：颜色拾取器日期：2024-05-14 点击(5) 评论(0)

简单实用的jQuery颜色选择器插件

简介

ClassyColor是一款简单实用的jQuery颜色选择器插件。你可以使用直观的HSL颜色，也可以使用RGB颜色，并且选择颜色时可以设置颜色的透明度。它的特点还有：

1. 支持移动手机
2. 可以使用CSS来修改外观样式
3. 可以选择颜色范围，支持透明度
4. 颜色选择器打开时支持动画效果
####  使用方法
使用该圆形进度条插件需要引入jQuery和jquery.classycolor.min.js和jquery.classycolor.min.css文件。

```html
<link rel="stylesheet" type="text/css" href="css/jquery.classycolor.min.css" />              
<script src='js/jquery.min.js'></script>
<script src='js/jquery.classycolor.min.js'></script>   
```
####  HTML结构
可以使用一个空的<div>来制作这个颜色选择器。

<div class="colorpicker"></div>               
 初始化插件
在页面DOM元素加载完毕之后，可以通过ClassyColor()方法来初始化该颜色选择器插件。

```html
$('.colorpicker').ClassyColor();      
```          
####  配置参数

| 参数  | 描述  |
| ------------ | ------------ |
| color  |  默认显示的颜色。 |
|  colorSpace | 颜色类型，可以是rgb, rgba, hsl 或 hsla，默认值为rgba。  |
| staticComponents | 是否根据当前的颜色来更新滑块的背景颜色。默认值为false。  |
|  labels | 是否在颜色滑块上显示标签，默认值为false。  |
|  displayColor | 输出颜色的文本格式，可以是hex 或 css。  |
|  displayColorSpace | 是否显示输出颜色类型，可以是true 或 false，默认值为hsla。  |

####  方法
| 参数  | 描述  |
| ------------ | ------------ |
| toString：  |  使用字符串来输出颜色值，如：#ed1978。 |
|  toCssString： | 使用CSS格式字符串来输出颜色值，如：hsla(326, 30%, 53%, 0.60)。  |
| destroy： | 销毁颜色选择对象。  |

####  事件
newcolor：当一个新的颜色被选择时触发的事件。

web299.com

简单实用的jQuery颜色选择器插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果