参考: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: