颜色调节器

下面为效果显示

Red:	0
Green:	0
Blue:	0

脚本说明:
第一步：把如下代码加入<body>区域中
<STYLE type=text/css>TD {
	FONT-SIZE: 14px
}
.outerSlideContainer {
	BORDER-BOTTOM: buttonface 1px inset; BORDER-LEFT: buttonface 1px inset; BORDER-RIGHT: buttonface 1px inset; BORDER-TOP: buttonface 1px inset; HEIGHT: 20px; MARGIN-LEFT: 10px; WIDTH: 300px
}
.sliderHandle {
	BACKGROUND: buttonface; BORDER-BOTTOM: white 2px outset; BORDER-LEFT: white 2px outset; BORDER-RIGHT: white 2px outset; BORDER-TOP: white 2px outset; FONT-SIZE: 12px; HEIGHT: 18px; OVERFLOW: hidden; TEXT-ALIGN: center; WIDTH: 33px
}
.lineContainer {
	HEIGHT: 18px; POSITION: absolute; WIDTH: 298px
}
.line {
	FILTER: alpha(style=1); HEIGHT: 18px; OVERFLOW: hidden; POSITION: relative; WIDTH: 298px
}
#colorBox {
	BORDER-BOTTOM: buttonface 1px inset; BORDER-LEFT: buttonface 1px inset; BORDER-RIGHT: buttonface 1px inset; BORDER-TOP: buttonface 1px inset; HEIGHT: 50px; WIDTH: 50px
}
</STYLE>

<SCRIPT type=text/javascript>
var dragobject = null;
var type;
var onchange = "";
var tx;
var ty;

function moveme_onmousedown() {
	var tmp = getReal(window.event.srcElement, "className", "sliderHandle");	//Traverse the element tree
	if(tmp.className == "sliderHandle") {
		dragobject = tmp;			//This is a global reference to the current dragging object

onchange = dragobject.getAttribute("onchange");	//Set the onchange function
		if (onchange == null) onchange = "";
		type = dragobject.getAttribute("type");			//Find the type

if (type=="y")		//Vertical
			ty = (window.event.clientY - dragobject.style.pixelTop);
		else				//Horizontal
			tx = (window.event.clientX - dragobject.style.pixelLeft);

window.event.returnValue = false;
		window.event.cancelBubble = true;
	}
	else {
		dragobject = null;	//Not draggable
	}	
}

function moveme_onmouseup() {
	if(dragobject) {
		dragobject = null;
	}
}

dragobject.value = dragobject.style.pixelTop / (dragobject.parentElement.style.pixelHeight - dragobject.style.pixelHeight);
				eval(onchange.replace(/this/g, "dragobject"));
			}
		}
		else {
			if(event.clientX  >= 0) {
				if ((event.clientX  - tx >= 0) && (event.clientX - tx <= dragobject.parentElement.clientWidth - dragobject.style.pixelWidth)) {
					dragobject.style.left = event.clientX - tx;
				}
				if (event.clientX - tx < 0) {
					dragobject.style.left = "0";
				}
				if (event.clientX - tx > dragobject.parentElement.clientWidth - dragobject.style.pixelWidth - 0) {
					dragobject.style.left = dragobject.parentElement.clientWidth - dragobject.style.pixelWidth;
				}

dragobject.value = dragobject.style.pixelLeft / (dragobject.parentElement.clientWidth - dragobject.style.pixelWidth);
				eval(onchange.replace(/this/g, "dragobject"));
			}
		}
		
		
		window.event.returnValue = false;
		window.event.cancelBubble = true;
	} 
}

function setValue(el, val) {
	el.value = val;
	if (el.getAttribute("TYPE") == "x")
		el.style.left =  val * (el.parentElement.clientWidth - el.style.pixelWidth);
	else
		el.style.top =  val * (el.parentElement.clientHeight - el.style.pixelHeight);

eval(el.onchange.replace(/this/g, "el"))
}

document.onmousedown = moveme_onmousedown;
document.onmouseup = moveme_onmouseup;
document.onmousemove = moveme_onmousemove;

第二步：把<body>中的内容改为：
<body onload=init()>