三零网 www.q3060.com -- 技术、分享、进步
当前位置: > 网络编程 > CSS/HTML > html5实例:用图片制作的选色器的综合应用代码

html5实例:用图片制作的选色器的综合应用代码

投稿:mmqxmq2p  发布时间:2018-01-01  【手机版】  人气:

导读:三零(q3060.com)小编琪琪接下来为你介绍一下关于综合应用的技巧,希望对您有帮助。那么下面我们一起看看,具体内容所述如下:

<html>
<head>
<title>一款用图片制作的选色器</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
</head>
<!--把<body>改为-->
<body onLoad="capture()">
<!--把下面代码加到<body>与</body>之间-->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
addary = new Array(); //red
addary[0] = new Array(0,1,0); //red green
addary[1] = new Array(-1,0,0); //green
addary[2] = new Array(0,0,1); //green blue
addary[3] = new Array(0,-1,0); //blue
addary[4] = new Array(1,0,0); //red blue
addary[5] = new Array(0,0,-1); //red
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>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<img src="/html/txdm_2/images/20100811/bg_image.jpg" border=0>
</td>
</tr>
<tr>
<td align="center">
<br>
<form name="f">
<input type="text" name="t" size=27>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>

<p align="center">本特效由 <a href="http://www.q3060.com">三零网</a>丨 收集于互联网,只为兴趣与学习交流,不作商业用途。</p>

结语:以上就是分享给大家的综合应用内容了,希望大家多多支持三零网站。更多知识点,可以能过本站网页顶端的搜索或进入相关专题,如果有任何疑问都可以一起留言交流。

●【往下看,下一页更精彩】●
1  2  3  4  5  6  7  下一页 
延伸阅读:
·html5实例:三种有趣的方块滑行移动特效的综合应用代码
·html5实例:45种JavaScript缓冲特效集合的综合应用代码
·html5实例:仿windows2003开机的loading特效的综合应用代码
·html5实例:CSS控制滚动条的位置及文本方向的综合应用代码
·html5实例:一款不错的跳转首页的网站404错误页面的综合应用代码
·html5实例:JS实现QQ在线客服状态检测,自定义在线状态图片的综合应用代码
·html5实例:Dreamweaver风格的网页调色板的综合应用代码
·html5实例:禁止右键、禁止选中、禁止复制的Js代码的综合应用代码
·html5实例:响应链接变色的滚动条的综合应用代码
·html5实例:定时隐藏的flash广告的综合应用代码
  
温馨提示:以上内容整理于网络,仅供参考,如果对您有帮助,请收藏本网站!
大家感兴趣的内容
最新的内容
热门搜索
三零网 | 网站地图| 最近更新 | 关于我们 | 联系方式 | |

Copyright © 2012-2020,Q3060.COM All Rights Reserved.