html颜色选择器 控件,js颜色选择器插件

特效描述：js 颜色选择器插件。js颜色选择器插件

代码结构

1. 引入JS

2. HTML代码

1、基础列子

点击此处:

2、带关闭按钮的列子

点击此处:

3、颜料样式列子

色彩外边界:

色彩插图边界:

颜色选取板:

透明的选取:

4、颜色与取值

更改颜色值:

更改颜色样式:

更改颜色值与样式:

5、获取颜色的RGB与HSV值

R G B - - -

H S V

选择任何颜色:

6、HSV选择颜色属性与HVS选择颜色属性

HSV 属性: HVS 属性:

5、javascript 定义选择颜色值

var myPicker = new jscolor.color(document.getElementById('myField1'), {})

myPicker.fromString('99FF33') // now you can access API via 'myPicker' variable

6、选择颜色变化事件 列子

改变背景:

7、颜色测试列子

function add() {

var count = 100

for(var i=0; i

var input = document.createElement('INPUT')

input.style.width = '5em'

// bind jscolor

var col = new jscolor.color(input)

col.fromHSV(6/count*i, 1, 1)

document.getElementsByTagName('BODY')[0].appendChild(input)

}

}

8、自定义位置列子

左边:

右边:

顶部:

9、鼠标滑过显示与隐藏

取消自动显示/隐藏的选取

将鼠标移向这些按钮:

οnmοusemοve="document.getElementById('myColortest').color.showPicker()">

οnmοusemοve="document.getElementById('myColortest').color.hidePicker()">

10、颜色选择器样式尺寸

加强边界:

加强面板: