str += "      this.resetColorSlider = function(c1, c2) {     // 重置指定的渐变色调色条\n";
                              str += "            this.basicColor = c1*256*256 + c2*256;\n";
                              str += "            var i = 0, j = 0;\n";
                              str += "            for (i = 0; i < 255; i=i+3*sliderColorsColumnWidth) {\n";
                              str += "                  this.colorSlider.rows[j].cells[0].bgColor = i+this.basicColor;\n";
                              str += "                  j++;\n";
                              str += "            }\n";
                              str += "      }\n";
                              str += "      this.resetColor = function() {  // 在第n个颜色元素上,根据输入的文字颜色值改变滑竿上的刻度\n";
                              str += "            var c = parseInt(this.inputColor.value, 10);\n";
                              str += "            if (c > 255) {alert('颜色错,只能 0——255'); c = 255;}\n";
                              str += "            this.showColor.bgColor = c * this.basicStep;\n";
                              str += "            this.scrollBlock.style.left = this.basicLeft + c / 3;\n";
                              str += "            this.resetBasicColor();\n";
                              str += "            colorAll.value = (c * this.basicStep + this.basicColor).toString(16);\n";
                              str += "            showAll.bgColor = c * this.basicStep + this.basicColor;\n";
                              str += "      }\n";
                              str += "      this.resetObject = function() {\n";
                              str += "            this.colorSlider = eval('colorSlider' + this.no);\n";
                              str += "            this.scrollBlock = eval('scrollBlock' + this.no);\n";
                              str += "            this.showColor = eval('show' + this.colorNo);\n";
                              str += "            this.inputColor = eval('color' + this.colorNo);\n";
                              str += "      }\n";
                              str += "      if (this.isVertical) {\n";
                              str += "            this.clickSliderColor = function(n) {\n";
                              str += "                  this.scrollBlock.style.top = this.basicTop  + n/3;\n";
                              str += "                  colorAll.value = (this.basicColor + n*this.basicStep).toString(16);\n";
                              str += "                  showAll.bgColor = this.basicColor + n*this.basicStep;\n";
                              str += "            }\n";
                              str += "            this.dragSlider = function(e) {    // 拖动垂直滑竿上的滑块\n";
                              str += "                  if (this.layerMove) {\n";
                              str += "                        var h = this.oldH + parseInt(e.clientY, 10) - this.oldY - this.basicTop;\n";
                              str += "                        if (h>=0 && h<256/3) {\n";
                              str += "                              this.scrollBlock.style.top = this.basicTop + h;\n";
                              str += "                              colorAll.value = (h * 3 * this.basicStep + this.basicColor).toString(16);\n";
                              str += "                              showAll.bgColor = h * 3 * this.basicStep + this.basicColor;\n";
                              str += "                        }\n";
                              str += "                  }\n";
                              str += "            }\n";
                              str += "            this.resetBasicColor = function(c1, c2) {\n";
                              str += "                  if (c1 != null & c2 != null) {\n";
                              str += "                        if (this.colorNo == 0) {this.basicColor = c1*256 + c2;}\n";
                              str += "                        else {if (this.colorNo == 1) {this.basicColor = c1*256*256 + c2;}\n";
                              str += "                              else {this.basicColor = c1*256*256 + c2*256;}\n";
                              str += "                        }\n";
                              str += "                  }\n";
                              str += "            }\n";
                              str += "      }\n";
                              str += "      else {this.clickSliderColor = function(n) {\n";
                              str += "                  this.scrollBlock.style.left = this.basicLeft  + n/3;\n";
                              str += "                  colorAll.value = (this.basicColor + n*this.basicStep).toString(16);\n";
                              str += "                  showAll.bgColor = this.basicColor + n*this.basicStep;\n";
                              str += "                  this.showColor = n*this.basicStep;\n";
                              str += "                  this.inputColor.value = n;\n";
                              str += "            }\n";
                              str += "            this.dragSlider = function(e) {      // 拖动水平滑竿上的滑块\n";
                              str += "                  if (this.layerMove) {\n";
                              str += "                        var w = this.oldW + parseInt(e.clientX, 10) - this.oldX - this.basicLeft;\n";
                              str += "                        if (w>=0 && w<256/3) {\n";
                              str += "                              this.scrollBlock.style.left = this.basicLeft + w;\n";
                              str += "                              colorAll.value = (w * 3 * this.basicStep + this.basicColor).toString(16);\n";
                              str += "                              showAll.bgColor = w * 3 * this.basicStep  + this.basicColor;\n";
                              str += "                              this.inputColor.value = w * 3;\n";
                              str += "                              this.showColor.bgColor = w * 3 * this.basicStep;\n";
                              str += "                        }\n";
                              str += "                  }\n";
                              str += "            }\n";
                              str += "            this.resetBasicColor = function() {\n";
                              str += "                  var c0 = (color0.value.length>0?parseInt(color0.value,10):0);\n";
                              str += "                  var c1 = (color1.value.length>0?parseInt(color1.value,10):0);\n";
                              str += "                  var c2 = (color2.value.length>0?parseInt(color2.value,10):0);\n";
                              str += "                  if (this.colorNo == 0) {this.basicColor = c1*256 + c2;}\n";
                              str += "                  else {if (this.colorNo == 1) {this.basicColor = c0*256*256 + c2;}\n";
                              str += "                        else {this.basicColor = c0*256*256 + c1*256;}\n";
                              str += "                  }\n";
                              str += "            }\n";
                              str += "      }\n";

解决方案 »

  1.   

    str += "      this.setUpSlider = function(e) {         // 提起滑块\n";
                                  str += "            this.scrollBlock.setCapture(); // 锁定滑块对象\n";
                                  str += "            this.oldX = parseInt(e.clientX, 10);\n";
                                  str += "            this.oldY = parseInt(e.clientY, 10);\n";
                                  str += "            this.oldW = parseInt(this.scrollBlock.style.left, 10);\n";
                                  str += "            this.oldH = parseInt(this.scrollBlock.style.top, 10);\n";
                                  str += "            this.layerMove = true;\n";
                                  str += "            this.resetBasicColor();\n";
                                  str += "      }\n";
                                  str += "      this.setDownSlider = function() {   // 放下滑块\n";
                                  str += "            if (this.layerMove) {\n";
                                  str += "                  this.layerMove = false;\n";
                                  str += "                  this.scrollBlock.releaseCapture();   // 释放滑块对象\n";
                                  str += "            }\n";
                                  str += "      }\n";
                                  str += "      return this;\n";
                                  str += "}\n";
                                  str += "var colorSliders = new Array();\n"
                                       + "colorSliders[0] = new colorSlider(200, 16, true, 2);\n"
                                       + "colorSliders[1] = new colorSlider(95, 110, false, 0);\n"
                                       + "colorSliders[2] = new colorSlider(95, 138, false, 1);\n"
                                       + "colorSliders[3] = new colorSlider(95, 166, false, 2);\n"
                                       + "function myInit() {\n"
                                       + "      for (var i=0; i<colorSliders.length; i++) {colorSliders[i].resetObject();}\n"
                                       + "      resetCurrentColor((initColor*256*256 + initColor*256 + initColor).toString(16), true);\n"
                                       + "}\n"
                                       + "\/\/-->\n"
                                       + "<\/SCRIPT>\n"
                                       + "<\/HEAD>\n";
                                  writeln(str); str = "";
                                  str += "<BODY onload='myInit()' leftmargin='0' topmargin='0' marginwidth='0' marginheight='0' oncontextmenu='return false'>"
                                       + "<table width='234' border='0' cellpadding='0' cellspacing='0' style='border:1px solid #66667E;'"
                                       + (this.parameter.panelBgColor==""?"":" bgcolor='"+this.parameter.panelBgColor+"'") + ">"
                                       + "  <tr><td height='16' width='100%' style='FILTER:alpha(Enabled=true,style=1,Opacity=100,finishOpacity=40,startx=0,starty=0, finishx=100%, finishy=100%)'>"
                                       + "    <table border='0' cellpadding='0' cellspacing='0' width='100%'"
                                       + " onmouseover=\"this.style.cursor='move'\" onmouseout=\"this.style.cursor='default'\""
                                       + " onmousedown='setUpPanel(this)' onmouseup='setDownPanel(this)' onmousemove='dragPanel(this)'"
                                       + "><tr height='16'" + (this.parameter.titleBgColor==""?"":" bgcolor='"+this.parameter.titleBgColor+"'") + ">"
                                       + "<td align=center valign=middle" + (this.parameter.titleColor==""?"":" style='color:"+this.parameter.titleColor+"'") + ">调色板</td>"
                                       + "<td width='16'><table border='0' cellpadding='0' cellspacing='0'><tr>"
                                       + "<td onclick='resizeColorPanel(this)' onmouseover=\"this.style.cursor='hand'\" onmouseout=\"this.style.cursor='default'\" style='font-size:11px;font-family:Webdings;" + (this.parameter.titleColor==""?"":"color:"+this.parameter.titleColor+";") + "'>0</td>"
                                       + "<td onclick='closeColorPanel()' onmouseover=\"this.style.cursor='hand'\" onmouseout=\"this.style.cursor='default'\" style='font-size:11px;font-family:Webdings;" + (this.parameter.titleColor==""?"":"color:"+this.parameter.titleColor+";") + "'>r</td>"
                                       + "</tr></table></td></tr></table>"
                                       + "</td></tr><tr><td height='1' bgcolor='#FFFFFF'></td></tr><tr><td height='1' bgcolor='#9E9DA2'></td></tr>"
                                       + "<tr height=1><td><table id=panelBody width='100%' border='0' cellpadding='0' cellspacing='0'>"
                                       + "<tr><td height='5'></td></tr><tr><td><table width='100%' border='0' cellpadding='0' cellspacing='1'>"
                                       + "<tr><td id=panel1 width='50%'>"
                                       + "<table border=1 cellpadding=0 cellspacing=0 bgcolor=#dddddd><tr height=" + this.parameter.colorsColumnHeight + ">";
                                  writeln(str); str = "";
                                  j = 0;
                                  for (i = 0; i < this.parameter.myColors.length; i++) {
                                        if (j < this.parameter.colorsColumnNumber) {j++;}
                                        else {j = 1; writeln("</tr><tr height=" + this.parameter.colorsColumnHeight + ">");}
                                        write("<td width=" + this.parameter.colorsColumnWidth + " bgColor=#" + this.parameter.myColors[i]);
                                        write(" onClick=\"resetCurrentColor('" + this.parameter.myColors[i] + "', true)\"></td>");
                                  }
                                  writeln("</tr></table>");
                                  writeln("</td><td id=panel2 width='40%'>");
                                  write("<table border=0 cellpadding=0 cellspacing=0");
                                  write(" onmouseover=\"this.style.cursor='crosshair'\"");
                                  writeln(" onmouseout=\"this.style.cursor='default'\">");
      

  2.   

    for (i = 0; i < 255; i=i+this.parameter.sliderColorsColumnWidth*3) {
                                        writeln("<tr height="+this.parameter.sliderColorsColumnWidth+">");
                                        for (j = 0; j < 255; j=j+this.parameter.sliderColorsColumnWidth*3) {
                                              myColor = (i*256*256+j*256).toString(16);
                                              write("<td width="+this.parameter.sliderColorsColumnWidth+" bgcolor='#" + ("000000"+myColor).substring(myColor.length) + "'");
                                              write(" onclick=\"resetCurrentColor('" + myColor + "', true)\"></td>");
                                        }
                                        writeln("</tr>");
                                  }
                                  write("</table>");
                                  write("</td><td id=panel3 width='10%'><script>colorSliders[0].put();</script></td>");
                                  writeln("</tr></table></td></tr>");
                                  write("<tr><td height='2'></td></tr><tr><td>");
                                  write("<table width='100%' cellpadding='0' cellspacing='2' style='font-size:12px;font-family:Verdana;'>");
                                  write("<tr><td rowspan=2 align=center>");
                                  write("<table width=65 height=50 border=1 align=center cellpadding=0 cellspacing=0 style='font-size:12px;font-family:宋体;'>");
                                  write("<tr><td id=showAll width='100%' align=center><table><tr><td bgColor='#ffffff'>当前色</td></tr></table></td></tr>");
                                  write("</table></td>");
                                  write("<td id=show0 bgColor='#ff0000' align='center' width=20 height=26><table><tr><td bgColor='#ffffff'>R</td></tr></table></td>");
                                  write("<td align='center'><script>colorSliders[1].put();<\/script></td>");
                                  writeln("<td align='center'>");
                                  write("<input style='border: 1px solid #A5ACB2;font: 12px Verdana;' id=color0 name=color0 maxlength=3 size=3 value='255'");
                                  write("         onkeypress='return (event.keyCode>47&&event.keyCode<58)'"); 
                                  write("         onkeyup='colorSliders[1].resetColor()' onpaste='return false' onfocus='this.select()'>");
                                  writeln("</td></tr>");
                                  write("<tr>");
                                  write("<td id=show1 bgColor='#00ff00' align='center' width=20 height=26><table><tr><td bgColor='#ffffff'>G</td></tr></table></td>");
                                  write("<td align='center'><script>colorSliders[2].put();<\/script></td>");
                                  write("<td align='center'>");
                                  write("<input style='border: 1px solid #A5ACB2;font: 12px Verdana;' id=color1 name=color1 maxlength=3 size=3 value='255'");
                                  write("         onkeypress='return (event.keyCode>47&&event.keyCode<58)'");
                                  write("         onkeyup='colorSliders[2].resetColor()' onpaste='return false' onfocus='this.select()'>");
                                  writeln("</td></tr>");
                                  write("<tr><td align=center>");
                                  write("#<input style='border: 1px solid #A5ACB2;font: 12px Verdana;' id=colorAll name=colorAll maxlength=6 size=6 value='FFFFFF'");
                                  write("          onKeyPress='return ((event.keyCode>47&&event.keyCode<58)||(event.keyCode>64&&event.keyCode<71)||(event.keyCode>95&&event.keyCode<106||event.keyCode==8))'"); 
                                  write("          onKeyUp='resetCurrentColor(this.value, false)' onChange='resetCurrentColor(this.value, false)' onpaste='return false' onFocus='this.select()'>");
                                  write("</td>");
                                  write("<td id=show2 bgColor='#0000ff' align='center' width=20 height=26><table><tr><td bgColor='#ffffff'>B</td></tr></table></td>");
                                  write("<td align='center'><script>colorSliders[3].put();<\/script></td>");
                                  writeln("<td align='center'>");
                                  write("<input style='border: 1px solid #A5ACB2;font: 12px Verdana;' id=color2 name=color2 maxlength=3 size=3 value='255'");
                                  write("         onkeypress='return (event.keyCode>47&&event.keyCode<58)'");
                                  write("         onkeyup='colorSliders[3].resetColor()' onpaste='return false' onfocus='this.select()'>");
                                  writeln("</td></tr></table></td></tr>");
                                  write("<tr><td height='1' bgcolor='#9E9DA2'></td></tr><tr><td height='1' bgcolor='#FFFFFF'></td></tr>");
                                  write("<tr><td height='25' align='center'>");
                                  write("<input type='button' onclick='returnColor()' value='确定' style='background: #BEC0CD;padding-top: 2px;height: 20px;font-size: 12px;cursor:hand;border: 1px solid;height:20;weight:40'>");
                                  write("&nbsp;");
                                  write("<input type='button' onclick='closeColorPanel()' value='关闭' style='background: #BEC0CD;padding-top: 2px;height: 20px;font-size: 12px;cursor:hand;border: 1px solid;height:20;weight:40'>");
                                  writeln("</td></tr>");
                                  write("<tr><td height=1 bgcolor='#FFFFFF'></td></tr><tr><td height=2 bgcolor='#E0DFE5'></td></tr><tr><td height=1 bgcolor='#9D9CA1'></td></tr>");
                                  writeln("</table></td></tr></table>");
                                  writeln("<\/body>");
                                  writeln("<\/HTML>");
                                  close();
                            }
                      }
    //------------------------------------------------------------
                      this.colorPanel = newObj;
                      newObj.reset(p);
                }
                return this;
          }
          var tt = new this.create(name);
          if (tt != null) {eval("document." + name + " = tt");}
          return tt;
    }
    //-->