先看实现的效果图, 本文底部有完整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

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

  1. bigcolorpicker 颜色拾取器插件——例

    参考:http://bigui4.sinaapp.com/picker/colorpicker.html 效果: html: <!DOCTYPE html> <html> &l ...

  2. js颜色拾取器

    几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...

  3. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. HTML5、canvas颜色拾取器

    效果图: 代码: <!doctype html> <html lang="en"> <head> <meta charset=" ...

  5. 推荐几款jQuery表格插件

    平时项目中,会碰到很多表格元素,这里推荐几款jQuery表格插件. Stackable.js 通常在小屏幕上,表格的表形形式不大好,因为用户会缩放平移,或者就是表格太小,导致数据不可见.Stackab ...

  6. NX二次开发-Block UI C++界面Object Color Picker(对象颜色拾取器)控件的获取(持续补充)

    Object Color Picker(对象颜色拾取器)控件的获取 NX9+VS2012 #include <uf.h> #include <uf_obj.h> UF_init ...

  7. 20款jQuery 的音频和视频插件

    分享 20 款jQuery的音频和视频插件 Blueimp Gallery: DEMO || DOWNLOAD Blueimp gallery 主要为移动设备而设计,同时也支持桌面浏览器.可定制视频和 ...

  8. 分享一款强大的图片查看器插件,手机PC 通吃,功能超级齐全!

    一款强大的图片查看器插件,手机PC 通吃,功能超级齐全! 地址:http://photoswipe.com/

  9. 推荐六款炫酷的HTML5效果插件

    1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果.这和HTML5 ...

随机推荐

  1. IAR EWARM : Debugging with CMSIS-DAP

  2. Unity3d学习笔记记录

    1.发布到 ipad字体显示不出来,改变Position位置的Z轴为-1 2.发布打包有问题,记得用户权限有没有设置 3.ipad4分辨率:2048*1536 4.调整界面大小,尽量调整底下子对象位置 ...

  3. 基于开源SuperSocket实现客户端和服务端通信项目实战

    一.课程介绍 本期带给大家分享的是基于SuperSocket的项目实战,阿笨在实际工作中遇到的真实业务场景,请跟随阿笨的视角去如何实现打通B/S与C/S网络通讯,如果您对本期的<基于开源Supe ...

  4. 架构:The Onion Architecture : part 2(洋葱架构:第二篇)(转载)

    原位地址:http://jeffreypalermo.com/blog/the-onion-architecture-part-2/. In part 1, I introduced an archi ...

  5. Unity3D 的大场景内存优化

    我们公司的一个 MMORPG 项目最近在内存方面碰到了红线,昨天开会讨论了一下.我提出了一个改进方案,写篇 blog 记录一下. 问题是这样的.在当下的手机及平板硬件设备条件下,操作系统留给应用的可用 ...

  6. 一个exception

    今天调错,发生了一个错误:java.lang.IllegalStateException: ApplicationEventMulticaster not initialized [closed] 后 ...

  7. Office Web Apps 错误日志

    前言 最近一直在用Office Web Apps,使用过程会有各种各样的错误,众所周知,sharepoint的错误都在15/Logs下面保存错误日志,那么OWA呢? 经过查找,发现Office Web ...

  8. 关于Java中的equals方法

    关于Java中的equals方法 欢迎转载,但是请填写本人的博客园原址https://www.cnblogs.com/JNovice/p/9347099.html 一.什么是equals方法 equa ...

  9. python三大web框架Django,Flask,Flask,Python几种主流框架,13个Python web框架比较,2018年Python web五大主流框架

    Python几种主流框架 从GitHub中整理出的15个最受欢迎的Python开源框架.这些框架包括事件I/O,OLAP,Web开发,高性能网络通信,测试,爬虫等. Django: Python We ...

  10. FreeMarker:Java模板引擎

    本资源由 伯乐在线 - 黄余粮 整理 FreeMarker 是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写.FreeMarker被设计用来生成HTML Web页面,特别是基于M ...