效果展示
源碼下載：
http://hovertree.com/h/bjaf/yxrucn23.htm
代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery點擊文本框顏色拾取器 - 何問起</title>
<base target="_blank" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/84/css/main.css" />
<!--必要樣式-->
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/84/css/jquery.bigcolorpicker.css" />
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/jquery/84/js/jquery.bigcolorpicker.min.js"></script>
<script type="text/javascript">
$(function(){
$("#c1").bigColorpicker("c1");
$("#btn").bigColorpicker("c2");
$("#img").bigColorpicker(function(el,color){
$(el).css("background-color",color);
});
$(".ku").bigColorpicker(function(el,color){
$(el).css("background-color",color);
});
$("#c5").bigColorpicker("c5","L",6);
});
</script>
<style type="text/css">
.demo{width:300px; margin:20px auto}
.demo p{padding-bottom:10px}
#img{width:25px;height:25px;display:block; border:1px solid #d3d3d3;}
.ku{width:25px;height:25px;display:block; border:1px solid #d3d3d3; float:left; margin-right:10px}
.clear{clear:both}
</style>
</head>
<body>
<div id="main">
<div class="demo">
<p>1.點擊輸入框選取顏色</p>
<input type="text" id="c1">
</div>
<div class="demo">
<p>2.點擊選色按鈕選取顏色</p>
<input type="text" id="c2"><input id="btn" type="button" value="選色" />
</div>
<div class="demo">
<p>3.點擊方框選取顏色</p>
<a href="javascript:void(0)" id="img"></a>
</div>
<div class="demo">
<p>4.選取多個顏色</p>
<a href="javascript:void(0)" class="ku"></a>
<a href="javascript:void(0)" class="ku"></a>
<a href="javascript:void(0)" class="ku"></a>
<a href="javascript:void(0)" class="ku"></a>
<div class="clear"></div>
</div>
<div class="demo">
<p>5.自定義顏色塊個數</p>
<input type="text" id="c5">
</div>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用浏覽器：IE8、FireFox、Chrome、Safari、Opera、Edge、IE9和新版IE等.</p>
<p>來源：<a href="http://hovertree.com/">何問起</a> <a href="http://hovertree.com/menu/texiao/">網頁特效</a>
<a href="http://hovertree.com/h/bjaf/8b0vc3uu.htm">代碼說明</a></p>
</div>
</div>
</body>
</html>