看过http://andreaslagerkvist.com/jquery/colour-picker/之后,发现很麻烦,所以自己动手丰衣足食.
下面看代码
JavaScript
<script type="text/javascript"> $(function () { Init6Color(); $("#colorValue").click(function () { $("#ColorList").show(); }); }); function Init6Color() { var cs = new Array('00', '33', '66', '99', 'CC', 'FF'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { for (var k = 0; k < 6; k++) { var c = cs[i] + cs[j] + cs[k]; $("<div class='colordiv' style=\"background-color:#" + c + " \"></div>").appendTo($("#ColorList")) .click(function () { var color = $(this).css("background-color"); $("#colorValue").val(color).css("background-color", color); $("#ColorList").hide(); }); } } } } </script>
CSS:
<style type="text/css"> #ColorList { 180px; display: none; } #colorValue { background: url("jquery.colourPicker.gif") right center no-repeat; } .colordiv { display: inline-block; 30px; height: 30px; float: left; } </style>
HTML:
<div> <input id="colorValue" readonly="readonly" /> <div id="ColorList"> </div> </div>
博客园页面显示是第一次写,存在诸多问题,下面是源码地址:
https://files.cnblogs.com/Flyear/ColorPicker.zip