[json]js color 选择器

更新时间:2016-04-14    来源:js教程    手机版     字体:

【www.bbyears.com--js教程】


var PickColor = {
 input:null,
 cswatch : [
     [ "000000", "111111", "2d2d2d", "434343", "5b5b5b", "737373", "8b8b8b", "a2a2a2", "b9b9b9", "d0d0d0", "e6e6e6", "ffffff" ],
     [ "7f7f00", "bfbf00", "ffff00", "ffff40", "ffff80", "ffffbf", "525330", "898a49", "aea945", "c3be71", "e0dcaa", "fcfae1" ],
     [ "407f00", "60bf00", "80ff00", "a0ff40", "c0ff80", "dfffbf", "3b5738", "668f5a", "7f9757", "8a9b55", "b7c296", "e6ebd5" ],
     [ "007f40", "00bf60", "00ff80", "40ffa0", "80ffc0", "bfffdf", "033d21", "438059", "7fa37c", "8dae94", "acc6b5", "ddebe2" ],
     [ "007f7f", "00bfbf", "00ffff", "40ffff", "80ffff", "bfffff", "033d3d", "347d7e", "609a9f", "96bdc4", "b5d1d7", "e2f1f4" ],
     [ "00407f", "0060bf", "0080ff", "40a0ff", "80c0ff", "bfdfff", "1b2c48", "385376", "57708f", "7792ac", "a8bed1", "deebf6" ],
     [ "00007f", "0000bf", "0000ff", "4040ff", "8080ff", "bfbfff", "212143", "373e68", "444f75", "585e82", "8687a4", "d2d1e1" ],
     [ "40007f", "6000bf", "8000ff", "a040ff", "c080ff", "dfbfff", "302449", "54466f", "655a7f", "726284", "9e8fa9", "dcd1df" ],
     [ "7f007f", "bf00bf", "ff00ff", "ff40ff", "ff80ff", "ffbfff", "4a234a", "794a72", "936386", "9d7292", "c0a0b6", "ecdae5" ],
     [ "7f003f", "bf005f", "ff007f", "ff409f", "ff80bf", "ffbfdf", "451528", "823857", "a94a76", "bc6f95", "d8a5bb", "f7dde9" ],
     [ "800000", "c00000", "ff0000", "ff4040", "ff8080", "ffc0c0", "441415", "82393c", "aa4d4e", "bc6e6e", "d8a3a4", "f8dddd" ],
     [ "7f3f00", "bf5f00", "ff7f00", "ff9f40", "ffbf80", "ffdfbf", "482c1b", "855a40", "b27c51", "c49b71", "e1c4a8", "fdeee0" ]
 ],
 
 init:function(input){
  var left=-10000, top=-10000, color="#ffffff";
  
  if (input){
   if($(input).attr("type").toLowerCase() == "button"){
    input = $(input).prev("input");
   }else if($(input).attr("type").toLowerCase() == "text"){
    input = $(input);
   }else{
    return alert("error");
   }
   
   this.input = input;
   top = input.offset().top + 22;
   left = input.offset().left + 2;
   color = input.val();
  }
  $("#PickColorTable_oldColor").css("background-color", color);
  if ($("#PickColorTable").length > 0){
   $("#PickColorTable").css({left:left, top:top}).show();
   return ;
  }
  
  html = ""
   +" ";
  for (i=0; i<12; i++) {
   html += "";
   for (ii=0; ii<12; ii++) {
    html += "      + " onmouseover="PickColor.mouseover(this)" "
     + " onmouseout="PickColor.mouseout(this)" "
     + " onclick="PickColor.get(this, "#"+this.cswatch[i][ii]+"");return false;">";
   }
   html += "";
  }
  html += ""
   + ""
   + "";
  $("body").append(html);
  $("#PickColorTable").css({left:left, top:top}).show();
 },
 
 mouseover:function(E){
  $(E).css("border", "1px inset black");
  $("#PickColorTable_newColor").css("background-color", $(E).css("background-color"));
 },
 
 mouseout:function(E){
  $(E).css("border", "1px solid white");
 },
 
 get:function(E, color){
  this.input.val(color);
  this.input.next("input").css("background-color", color);
  this.hide();
 },
 
 hide:function(){
  $("#PickColorTable").hide();
  $("#PickColorTable_newColor").css("background-color", "#ffffff");
 },
 
 change:function(color){
  this.input.next("input").css("background-color", color);
 },
 
 keyup:function(color){
  if ($.browser.msie || !color) return false;
  this.input.next("input").css("background-color", color);
  $("#PickColorTable_oldColor").css("background-color", color);
 }
}

本文来源:http://www.bbyears.com/wangyezhizuo/23148.html

猜你感兴趣