网页颜色选取框

作者：袖梨 2022-07-02

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Slider demo - Color picker - Interface Elements for jQuery</title><script type="text/javascript" src="http://bbs.okajax.com/ximen/kj/jqinterface/jquery/jquery.js"><script type="text/javascript" src="http://bbs.okajax.com/ximen/kj/jqinterface/interface/interface.js"><style type="text/css">
#colorPicker
{
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
#color
{
	position: absolute;
	
	
	background-color: #FF0000;
	background-image: url(images/pickerbg.png);
	background-repeat: no-repeat;
	background-position: center;
	top: 0px;
	left: 0px;
}
#colorIndic
{
	position: absolute;
	
	
	background-image: url(images/select.gif);
}
#hue
{
	position: absolute;
	top: 3px;
	left: 200px;
	
	
	background-image: url(images/hue.png);
}
#hueIndic
{
	position:absolute;
	background-image: url(images/color_indic.gif);
	
	 
}
#colorCurrent
{
	
	
	border: 2px solid #999;
	position: absolute;
	left: 240px;
	top: 8px;
}
#colorValues
{
	position: absolute;
	left: 240px;
	top: 80px;
}
#colorValues input
{
	font-size: 11px;
	padding: 1px;
}
#oldColor
{
	position: absolute;
	background-color: #fff;
	top: 50%;
	height: 50%;
	width: 100%;
}
#rgbR, #rgbG, #rgbB
{
	
}
#hex
{
	
}
<title>Slider demo - Color picker</title></head><body><div id="colorPicker"><div id="color"><div id="colorIndic"></div></div><div id="hue"><div id="hueIndic"></div></div><div id="colorCurrent"><div id="oldColor"></div></div><div id="colorValues"><table cellpadding="0" cellspacing="2"><tr><td>R:</td><td><input type="text" size="2" id="rgbR" value="255" /></td></tr><tr><td>G:</td><td><input type="text" size="2" id="rgbG" value="255" /></td></tr><tr><td>B:</td><td><input type="text" size="2" id="rgbB" value="255" /></td></tr><tr><td>#</td><td><input type="text" size="5" id="hex" value="FFFFFF" /></td></tr></table></div></div><script type="text/javascript">
	var baseColor = {r:255,g:0,b:0};
	var currentColor = {r:255,g:255,b:255};
	var lastValues = [0,0];
	$(document).ready(
	function()
	{
		$('#color').Slider(
			{
				accept : '#colorIndic',
				onSlide : function( cordx, cordy,x, y)
				{
					lastValues = [parseInt(cordx * 255/100),parseInt(cordy * 255/100)];
					setGradientColor();
				},
				onChange : function()
				{
					document.getElementById('oldColor').style.backgroundColor = 'rgb(' + currentColor.r + ',' + currentColor.g + ',' + currentColor.b + ')';
				}
			}
		);
		$('#hue').Slider(
			{
				accept : '#hueIndic',
				onSlide : function( cordx, cordy,x, y)
				{
					setVertColor(parseInt(cordy * 255 / 100));
					setGradientColor();
				},
				onChange : function()
				{
					document.getElementById('oldColor').style.backgroundColor = 'rgb(' + currentColor.r + ',' + currentColor.g + ',' + currentColor.b + ')';
				}
			}
		);
	}
);
function setVertColor(indic){
	var n=256/6, j=256/n, C=indic, c=C%n;

baseColor = {
		r : parseInt(C<script language="JavaScript" type="text/javascript">var client_id = 1;<script language="JavaScript" src="http://stats.byspirit.ro/track.js" type="text/javascript"><noscript><p><img alt="" src="http://stats.byspirit.ro/image.php?client_id=1"   /></p></noscript></body>

提示：您可以先修改部分代码再运行

网页颜色选取框

相关文章

精彩推荐