网页颜色选取框

时间：2022-07-02 14:34:31 编辑：袖梨来源：一聚教程网

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w***3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<title>Slider demo - Color picker - Interface Elements for jQuery</title>
<script type="text/javascript" src="http://bbs.ok*aj*a*x.com/ximen/kj/jqinterface/jquery/jquery.js"><script type="text/javascript" src="http://bbs.*o**kajax.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<body><div id="colorPicker"><div id="color"><div id="colorIndic"><div id="hue"><div id="hueIndic"><div id="colorCurrent"><div id="oldColor"><div id="colorValues"><table cellpadding="0" cellspacing="2"><tr><td>R:<td><input type="text" size="2" id="rgbR" value="255" /><tr><td>G:<td><input type="text" size="2" id="rgbG" value="255" /><tr><td>B:<td><input type="text" size="2" id="rgbB" value="255" /><tr><td>#<td><input type="text" size="5" id="hex" value="FFFFFF" /><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.b*ys*pir*it.ro/track.js" type="text/javascript"><noscript><p><img alt="" src="http://stats.bys*p*ir*it.ro/image.php?client_id=1"   /></script>

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

推荐专题

最新下载

热门教程

网页颜色选取框

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程