在线颜色选择盘

人气：　来源：本站原创　作者：佚名　所属栏目：其他类　[切换到繁體中文]

介绍：自由自在的选择网页颜色。

演示：

<!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=gb2312" />
<title>站长手册_特效演示_在线颜色选择盘</title>
<style><!--body,td{font-size: 12px;}--></style>

</head>
<body bgcolor="" onLoad="capture()">
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<SCRIPT language=JavaScript>
<!--
addary = new Array();
addary[0] = new Array(0,1,0);
addary[1] = new Array(-1,0,0);
addary[2] = new Array(0,0,1);
addary[3] = new Array(0,-1,0);
addary[4] = new Array(1,0,0);
addary[5] = new Array(0,0,-1);
addary[6] = new Array(255,1,1);
clrary = new Array(360);
for(I = 0; I < 6; I++)
for(j = 0; j < 60; j++) {
clrary[60 * I + j] = new Array(3);
for(k = 0; k < 3; k++) {
clrary[60 * I + j][k] = addary[6][k];
addary[6][k] += (addary[I][k] * 4);
   }
}
function capture() {
if(document.layers) {
layobj = document.layers['wheel'];
layobj.document.captureEvents(Event.MOUSEMOVE);
layobj.document.onmousemove = moved;
}
else {
layobj = document.all["wheel"];
layobj.onmousemove = moved;
   }
}
function moved(e) {
y = 4 * ((document.layers)?e.layerX:event.offsetX);
x = 4 * ((document.layers)?e.layerY:event.offsetY);
sx = x - 512;
sy = y - 512;
qx = (sx < 0)?0:1;
qy = (sy < 0)?0:1;
q = 2 * qy + qx;
quad = new Array(-180,360,180,0);
xa = Math.abs(sx);
ya = Math.abs(sy);
d = ya * 45 / xa;
if(ya > xa) d = 90 - (xa * 45 / ya);
deg = Math.floor(Math.abs(quad[q] - d));
n = 0;
sx = Math.abs(x - 512);
sy = Math.abs(y - 512);
r = Math.sqrt((sx * sx) + (sy * sy));
if(x == 512 & y == 512) {
c = "000000";
}
else {
for(I = 0; I < 3; I++) {
r2 = clrary[deg][I] * r / 256;
if(r > 256) r2 += Math.floor(r - 256);
if(r2 > 255) r2 = 255;
n = 256 * n + Math.floor(r2);
}
c = n.toString(16);
while(c.length < 6) c = "0" + c;
}
if(document.layers) {
document.layers["wheel"].document.f.t.value = "#" + c;
document.layers["wheel"].bgColor = "#" + c;
}
else {
document.all["wheel"].document.f.t.value = "#" + c;
document.all["wheel"].style.backgroundColor = "#" + c;
}
return false;
}
//  End -->
</SCRIPT>
<div id=wheel style="LEFT: 240px; VISIBILITY: visible; WIDTH: 240px; POSITION: absolute; TOP: 80px; HEIGHT: 319px">
  <table cellSpacing=0 cellPadding=0 border=0>
    <tr>
      <td><IMG height=256 src="/texiao/zzsc_demo/20070620014502834.jpg" width=256 border=0> </td>
    </tr>
    <tr>
      <td align=middle><BR>
<FORM name=f>
        <Input size=27 name=t> </FORM></td>
    </tr>
  </table>
</div>
</td>
</tr>
</table>
</body>
</html>

[Ctrl+A全选提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效：
　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：onLoad="capture()"
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

<SCRIPT language=JavaScript>

</SCRIPT>
<div id=wheel style="LEFT: 240px; VISIBILITY: visible; WIDTH: 240px; POSITION: absolute; TOP: 80px; HEIGHT: 319px">
  <table cellSpacing=0 cellPadding=0 border=0>
    <tr>
      <td><IMG height=256 src="/texiao/zzsc_demo/20070620014502834.jpg" width=256 border=0> </td>
    </tr>
    <tr>
      <td align=middle><BR>
<FORM name=f>
        <Input size=27 name=t> </FORM></td>
    </tr>
  </table>
</div>