推荐一款jQuery ColorPicked 颜色拾取器插件

先看实现的效果图, 本文底部有完整demo 不想看我墨迹的可以跳过了^_^.

官网地址：http://www.eyecon.ro/colorpicker/#about

代码SVN 地址：https://github.com/Belelros/jQuery-ColorPicker.git

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>demo</title>

    <script src="static/js/jquery.min.js"></script>

    <script src="static/js/colorpicker.min.js"></script>

    <link rel="stylesheet" href="static/css/color Pick.css">

</head>

<body>

<input type="text" value="" id="picker" style="height:32px;width:100px;border:1px solid #B6B4B6;" readonly></input>

<script type="text/javascript">

    $('#picker').ColorPicker({

        layout:'rgbhex',

        color:'ff8800',

        onSubmit:function(hsb,hex,rgb,el) {

            $(el).css('background-color', '#'+hex);

            $(el).ColorPickerHide();

        }

    });

</script>

</body>

</html>

.colorpicker {

    width: 350px;

    height: 170px;

    overflow: hidden;

    position: absolute;

    font-family: Arial, Helvetica, sans-serif;

    display: none;

    z-index:;

    border:3px solid #BABABA;

    background-color:#121212;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

}

.colorpicker input {

    line-height: normal;

    width: auto;

}

.colorpicker_color {

    width: 150px;

    height: 150px;

    left: 9px;

    top: 8px;

    position: absolute;

    background: #f00;

    overflow: hidden;

    cursor: crosshair;

    border: 2px solid #474848;

}

.colorpicker_color div {

    position: absolute;

    top:;

    left:;

    width: 150px;

    height: 150px;

    background: url("images/overlay.png");

}

.colorpicker_color div div {

    position: absolute;

    top:;

    left:;

    width: 11px;

    height: 11px;

    overflow: hidden;

    background: url("images/select.gif");

    margin: -5px 0 0 -5px;

}

.colorpicker_hue {

    position: absolute;

    top: 8px;

    left: 175px;

    width: 17px;

    height: 150px;

    cursor: n-resize;

    background: url("images/select_hue.png");

    border: 2px solid #474848;

}

.colorpicker_hue div {

    position: absolute;

    width: 35px;

    height: 9px;

    overflow: hidden;

    margin: -4px 0 0 0;

    left: -9px;

}

.colorpicker_new_color {

    position: absolute;

    width: 60px;

    height: 30px;

    left: 208px;

    top: 8px;

    background: #f00;

    border: 2px solid #474848;

}

.colorpicker_current_color {

    position: absolute;

    width: 60px;

    height: 30px;

    left: 278px;

    top: 8px;

    background: #f00;

    border: 2px solid #474848;

}

.colorpicker input {

    background-color: transparent;

    border: 1px solid transparent;

    position: absolute;

    font-size: 10px;

    font-family: Arial, Helvetica, sans-serif;

    color: #898989;

    top: 2px;

    right: 10px;

    text-align: right;

    margin:;

    padding:;

    height: 13px;

    width: 30px;

    border: 1px solid #2f2f2f;

    background-color:  #121212;

}

.colorpicker_hex {

    position: absolute;

    width: 62px;

    height: 20px;

    left: 209px;

    top: 139px;

}

.colorpicker_hex input {

    right: 0px;

    width: 47px;

    float:right;

}

.colorpicker_field, .colorpicker_hex {

    border: 1px solid #2f2f2f;

}

.colorpicker_field {

    height: 20px;

    width: 60px;

    background-position: top;

    position: absolute;

}

.colorpicker_focus input {

    border: 1px solid #4d4b4b;

}

.colorpicker_field label, .colorpicker_hex label {

    color: #D8D8D8;

    font-size:  11px;

    text-shadow: none;

    display: block;

    margin-top: 2px;

    margin-left: 5px;

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: -moz-none;

    -ms-user-select: none;

    -o-user-select: none;

    user-select: none;

}

.colorpicker_rgb_r {

    top: 49px;

    left: 209px;

}

.colorpicker_rgb_g {

    top: 79px;

    left: 209px;

}

.colorpicker_rgb_b {

    top: 109px;

    left: 209px;

}

.colorpicker_hsb_h {

    top: 49px;

    left: 279px;

}

.colorpicker_hsb_s {

    top: 79px;

    left: 279px;

}

.colorpicker_hsb_b {

    top: 109px;

    left: 279px;

}

.colorpicker_submit {

    position: absolute;

    width: 62px;

    height: 19px;

    background: url("images/submit.png") top;

    bottom: 10px;

    right: 8px;

    overflow: hidden;

    cursor:pointer;

}

.colorpicker_focus{

    background: url("images/submit.png") 0px -19px;

}

demo

技术交流QQ群：15129679

随机推荐

bitnami下mysql配置-包含phpMyAdmin配置
mysql开启远程访问: 默认情况下mysql的绑定ip是bind-address=127.0.0.1 找到my.cnf bitnami@linux:~$ sudo find / -name my.c ...
Revit API创建墙的保温层修改墙厚度
start [Transaction(TransactionMode.Manual)] [Regeneration(RegenerationOption.Manual)] / ; ; ...
self.xxx = nil 可以等效于[_xxx release] _xxx= nil 么
如果属性是copy.retain的话是等价的.如下: - (void)setXXX:(NSString*)axx { if (_xxx != axx) { [_xxx release]; _xxx = ...
Java 获取客户端IP
像移动网关一样,iisforward这个ISAPI过滤器也会对request对象进行再包装,附加一些WLS要用的头信息.这种情况下,直接用request.getRemoteAddr()是无法取到真正的 ...
【elasticsearch】关于elasticSearch的基础概念了解【转载】
转载原文:https://www.cnblogs.com/chenmc/p/9516100.html 该作者本系列文章,写的很详尽 ================================== ...
Unity5中新的Shader体系简析
一.Unity5中新的Shader体系简析 Unity5和之前的书写模式有了一定的改变.Unity5时代的Shader Reference官方文档也进一步地变得丰满. 主要需要了解到的是,在原来的Un ...
删除list中的特定元素
对于动态删除list中的特定元素,一般用linkedList,删除时有以下两种方法. 1. 循环遍历,找到要删除的元素后删除并且减少list长度.如果不减少list长度,那么就仅仅删除了元素,但没改变 ...
Material Designer的低版本兼容实现（十二）—— Slider or SeekBar
Slider,我更喜欢叫他SeekBar,其实是一个东西啦,就是拖动条.5.0的拖动条和4.x上的HOLO风格完全不同,平添了一些精致.此外还加入了数值指示器,让用户在滑动的时候就能知道现在到了什么位 ...
关于Java中的equals方法
关于Java中的equals方法欢迎转载,但是请填写本人的博客园原址https://www.cnblogs.com/JNovice/p/9347099.html 一.什么是equals方法 equa ...
Java(C#)基础差异-数组
1.填充数组 Java 数组填充替换方法Arrays.fill() 举例如下: import java.util.Arrays; public class FillDemo { public stat ...

推荐一款jQuery ColorPicked 颜色拾取器插件

推荐一款jQuery ColorPicked 颜色拾取器插件的更多相关文章

随机推荐

热门专题