参考:http://bigui4.sinaapp.com/picker/colorpicker.html
效果:

html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>取色</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="http://bigui4.sinaapp.com/css/jquery.bigcolorpicker.css">
<script src="http://bigui4.sinaapp.com/js/jquery.bigcolorpicker.js"></script>
<style>
input{
background:none;
outline:none;
border:1px solid gray;
}
</style>
</head>
<body>
<div>
<input type="text" value="" id="demoText" />
<input id="bn" type="button" value="选色" />
</div>
<script type="text/javascript">
$("#bn").bigColorpicker(function(el, color) {
$('#demoText').css('background', color);
$('#demoText').val(color);
});
</script>
</body>
</html>
注意:还需将big_bgcolor.jpg复制到项目中,图片放置的目录结构参考css:
.bigpicker-bgimage{ background-image:url(../images/big_bgcolor.jpg); }
big_bgcolor.jpg:
