项目中需要用到颜色插件改变颜色,找了一下,发现了这个插件。1,可以实时地改变颜色,2,颜色选择的范围大
要在head标签里面引进改插件
<script src="js/colpick.js" type="text/javascript"></script> <link rel="stylesheet" href="css/colpick.css" type="text/css"/>
页面:
1 # <input type="text" id="picker"></input> 2 JS 3 4 $('#picker').colpick({ 5 6 layout:'hex', 7 8 submit:0, 9 10 colorScheme:'dark', 11 12 onChange:function(hsb,hex,rgb,el,bySetColor) { 13 14 $(el).css('border-color','#'+hex); 15 16 // Fill the text box just if the color was set using the picker, and not the colpickSetColor function. 17 18 if(!bySetColor) $(el).val(hex); 19 20 } 21 22 }).keyup(function(){ 23 24 $(this).colpickSetColor(this.value); 25 26 }); 27 CSS 28 29 #picker { 30 31 margin:0; 32 33 padding:0; 34 35 border:0; 36 37 70px; 38 39 height:20px; 40 41 border-right:20px solid green; 42 43 line-height:20px; 44 45 }
效果图:
插件下载地址:https://git.oschina.net/wxwphp/col.git