颜色拾取器

简介: 颜色拾取器

志向是天才的幼苗,经过热爱劳动的双手培育,在肥田沃土里将成长为粗壮的大树。——苏霍姆林斯基

官网:https://www.eyecon.ro/colorpicker/

效果:

代码:

<head>
    <link media="screen" rel="stylesheet" href="admin/plugins/colorpicker/css/colorpicker.css" type="text/css"/>
</head>
<body>
<div>
    <div id="tag-color-picker">
        <input type="text" id="tag-color-input')"/>
    </div>
</div>  
<script src="/admin/plugins/colorpicker/jquery.js"></script>
<script src="/admin/plugins/colorpicker/colorpicker.js"></script>
<script>
    let tagColorInput = $('#tag-color-input')
    tagColorInput.css('backgroundColor', '#ff0000');
    $('#tag-color-picker').ColorPicker({
        color: detail.tagColor || '#0000ff',
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            let color = '#' + hex
            tagColorInput.css('backgroundColor', color);
            tagColorInput.val(color);
        }
    });
</script>
</body>

下载:https://www.eyecon.ro/colorpicker/colorpicker.zip

相关文章
|
5月前
|
前端开发
Canvas如何画一个线条,画布效果最好添加字体和线条回溯
Canvas如何画一个线条,画布效果最好添加字体和线条回溯
|
编译器 Windows
<1>[QTCN]颜色拾取器
桌面置顶 获取全局鼠标坐标和颜色(Web值、RGB) 新增: 按下鼠标右键停止/开启
102 1
【Three.js入门】灯光与阴影、平行光阴影属性、聚光灯的属性和应用
【Three.js入门】灯光与阴影、平行光阴影属性、聚光灯的属性和应用
347 1
|
API
使用Threejs创建几何体并添加材质、光源、阴影、动画,添加坐标轴
使用Threejs创建几何体并添加材质、光源、阴影、动画,添加坐标轴
480 0
使用Threejs创建几何体并添加材质、光源、阴影、动画,添加坐标轴
|
前端开发 索引
使用canvas绘制渐变色矩形和使用按键控制人物移动
使用canvas绘制渐变色矩形和使用按键控制人物移动 1.使用canvas绘制渐变色矩形 效果演示 image.png 相关代码: Title canvas { border: 1px solid #ccc; } /* .
1429 0