推荐一款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

随机推荐

使用Java进行串口SerialPort通讯
1.准备工作在进行串口连接通讯前,必须保证你当前操作电脑上有可用且闲置的串口.因为一般的电脑上只有一个或者两个串口,如COM1或COM2,但大多数情况下,这些串口可能会被其他的程序或者 ...
架构：The Onion Architecture : part 3（洋葱架构：第三篇）（转载）
In my previous installments, I described what has become my approach to defining the architecture fo ...
JQuery攻略（四）事件
jQuery事件处理,鼠标的单击,双击,悬停,键盘按键,文本动画..... 此章节有 1.1被点击的按钮查找 1.2事件的自动触发 1.3点击之后禁用按钮 1.4鼠标事件 1.5焦点事件 1.6CSS ...
VS2010Web默认的浏览器设置和VS里调试JavaScript代码的设置
前言重装系统后,VS调用的Web浏览器不是IE了,VS调式不了JavaScript代码了.这两天一直在试终于搞定了.这里查找的问题当然主要是VS里面调式JavaScript代码了. 第一种方式设置V ...
hdu 2049 不easy系列之(4)——考新郎
不easy系列之(4)--考新郎 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
详细解读Volley（一）—— 基本Request对象 & RequestQueue
Volley它非常适合去进行数据量不大,但通信频繁的网络操作,而对于大数据量的网络操作,比如说下载文件等,Volley的表现就会非常糟糕.所以不建议用它去进行下载文件.加载大图的操作.有人可能会问,如 ...
利用js实现禁用浏览器后退浏览器返回
现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免,用户误操作点击浏览器后退,或者用鼠标手势后退什么的.容易出现误操作. 所以在有些页面上,适当的禁用浏览器的后退, ...
关于XSHM(Cross-Site History Manipulation)
http://blog.chinaunix.net/uid-27070210-id-3255407.html 乍一看,好像和以前 css history hack 差不多,其实原理还是不一样的.浏览器 ...
BMap：WEB 服务API
ylbtech-Map-Baidu: WEB 服务API 百度地图Web服务API为开发者提供http/https接口,即开发者通过http/https形式发起检索请求,获取返回json或xml格式的 ...
[leetcode]Palindrome Partitioning II @ Python
原题地址:https://oj.leetcode.com/problems/palindrome-partitioning-ii/ 题意: Given a string s, partition s ...

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

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

随机推荐

热门专题