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

随机推荐

Programming 2D Games 读书笔记(第二章)
本意还是想了解DirectX的,由于网上拿不到书的pdf文档,幸好有作者的源代码示例,想完整的看一下,基本的游戏需要的点. 下面直接以代码为例,仅用于帮助自身理解 http://www.progr ...
java 输入一个字符串,打印出该字符串中字符的所有排列
import java.util.Scanner; public class Demo001 { public static void main(String[] args) { String str ...
ProFTPd Local pr_ctrls_connect Vulnerability - ftpdctl 漏洞及攻击代码分析
攻击代码网址:http://www.exploit-db.com/exploits/394/ 1.执行环境: 1.ProFTPD 1.3.0/1.3.0a 2.编译ProFTPD时.--enable- ...
WinForm基于插件开发实现多项配置存储
一.课程介绍和实例在线演示明人不说暗话,跟着阿笨一起玩WinForm.本次分享课程属于<C#高级编程实战技能开发宝典课程系列>中的一部分,阿笨后续会计划将实际项目中的一些比较实用的关于C ...
在ASP.NET MVC中实现区域或城市选择
每次在"万达影城"网上购票总会用到左上角选择城市的功能.如下: 今天就在ASP.NET MVC中实现一下.我想最好的方式应该是写一个插件,但自己在这方面的功力尚欠缺,如果大家在这方 ...
npm WARN saveError ENOENT: no such file or directory
转自树之名原文npm WARN saveError ENOENT: no such file or directory解决我是在安装sequelize时出错的.提示的错误没有保存,类似于参考的文章中 ...
MySql错误处理（三）- 错误处理的例子
有几种错误处理的声明形式: § 如果任何错误(不是 NOT FOUND ) , 设置 l_error 为 1 后继续执行: DECLARE CONTINUE HANDLER FOR SQLEXCEPT ...
mongodb如何设置主键自增
function getNextSequence(name){ var ret = db.counters.findAndModify({ query: { _id: name}, update:{ ...
NumPy-高速处理数据
Numpy简单介绍标准安装的Python中用列表(list)保存一组值,能够用来当作数组使用,只是因为列表的元素能够是不论什么对象,因此列表中所保存的是对象的指针.这样为了保存一个简单的[1,2,3 ...
maven 阿里仓库
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0" xmlns:xsi="http://www.w3. ...

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

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

随机推荐

热门专题