兼容说明
兼容IE6及以上浏览器、主流浏览器
预览图
CSS代码
.sunui-color-container,
.sunui-color-container div,
.sunui-color-container span {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.sunui-color-container {
position: relative;
border: 0 none;
background-color: #565656;
width: 420px;
height: 280px;
margin: 50px 0 0 50px;
font-family: "Microsoft YaHei", "微软雅黑", serif;
color: #FFFFFF;
cursor: default;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.sunui-color-container .sunui-color-area {
position: absolute;
left: 12px;
top: 12px;
width: 256px;
height: 256px;
background-color: #00FF00;
overflow: hidden;
}
.sunui-color-container .sunui-color-area div {
height: 2px;
border: 0 none;
display: block;
position: static;
overflow: hidden;
}
.sunui-color-container .sunui-color-area .sunui-color-area-layer {
position: absolute;
top: 0;
left: 0;
width: 256px;
height: 256px;
}
.sunui-color-container .sunui-color-area .sunui-color-area-point {
width: 12px;
height: 12px;
*width: 10px;
*height: 10px;
_width: 12px;
_height: 12px;
position: absolute;
display: block;
left: 255px;
top: 0;
margin-left: -6px;
margin-top: -6px;
border: 1px solid #000000;
border-radius: 50%;
background: none;
overflow: hidden;
}
.sunui-color-container .sunui-color-index,
.sunui-color-container .sunui-color-index .sunui-color-index-layer {
position: absolute;
left: 284px;
top: 12px;
width: 18px;
height: 257px;
}
.sunui-color-container .sunui-color-index .sunui-color-index-layer {
left: 0;
top: 0;
}
.sunui-color-container .sunui-color-index .sunui-color-bar-container {
position: absolute;
top: 0;
left: -12px;
width: 42px;
height: 16px;
margin-top: -8px;
}
.sunui-color-container .sunui-color-index .sunui-color-bar-container .sunui-color-bar {
position: absolute;
top: 4px;
width: 0;
height: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
_width: 6px;
_height: 8px;
overflow: hidden;
}
.sunui-color-container .sunui-color-index .sunui-color-bar-container .sunui-color-bar-left {
left: 4px;
border-left: 6px solid #FFFFFF;
border-right: 0 none;
}
.sunui-color-container .sunui-color-index .sunui-color-bar-container .sunui-color-bar-right {
right: 4px;
border-right: 6px solid #FFFFFF;
border-left: 0 none;
}
.sunui-color-container .sunui-color-index .sunui-color-red2pink {
height: 43px;
background: linear-gradient(to bottom, #FF0000, #FF00FF);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FF0000,endColorStr=#FF00FF,gradientType=0);
}
.sunui-color-container .sunui-color-index .sunui-color-pink2blue {
height: 43px;
background: linear-gradient(to bottom, #FF00FF, #0000FF);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FF00FF,endColorStr=#0000FF,gradientType=0);
}
.sunui-color-container .sunui-color-index .sunui-color-blue2cyan {
height: 43px;
background: linear-gradient(to bottom, #0000FF, #00FFFF);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#0000FF,endColorStr=#00FFFF,gradientType=0);
}
.sunui-color-container .sunui-color-index .sunui-color-cyan2green {
height: 43px;
background: linear-gradient(to bottom, #00FFFF, #00FF00);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#00FFFF,endColorStr=#00FF00,gradientType=0);
}
.sunui-color-container .sunui-color-index .sunui-color-green2yellow {
height: 43px;
background: linear-gradient(to bottom, #00FF00, #FFFF00);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#00FF00,endColorStr=#FFFF00,gradientType=0);
}
.sunui-color-container .sunui-color-index .sunui-color-yellow2red {
height: 43px;
background: linear-gradient(to bottom, #FFFF00, #FF0000);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFF00,endColorStr=#FF0000,gradientType=0);
}
.sunui-color-container .sunui-color-rgb-container {
position: absolute;
left: 318px;
top: 12px;
background: none;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-show-container {
position: relative;
top: 0;
left: 0;
width: 70px;
height: 70px;
*width: 68px;
*height: 68px;
_width: 70px;
_height: 70px;
border: 1px solid #404040;
margin: 20px 0;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-show-container .sunui-color-text {
position: absolute;
left: 0;
width: 68px;
height: 20px;
text-align: center;
font-size: 14px;
line-height: 20px;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-show-container .sunui-color-text-new {
top: -20px;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-show-container .sunui-color-text-current {
bottom: -20px;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-show-container .sunui-color-web-safe {
position: absolute;
right: -22px;
bottom: 12px;
width: 14px;
height: 14px;
*width: 12px;
*height: 12px;
_width: 14px;
_height: 14px;
border: 1px solid #404040;
background: #FFFFFF;
overflow: hidden;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-show-container .sunui-color-web-safe div {
height: 100%;
*height: 10px;
_height: 100%;
border: 1px solid #FFFFFF;
background: #999999;
overflow: hidden;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-show-container .sunui-color-show {
position: relative;
top: 0;
left: 0;
height: 50%;
background-color: #FFFFFF;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-show-container .sunui-color-show-new {
background-color: #0000FF;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-show-container .sunui-color-show-current {
background: none;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-show-container .sunui-color-show .empty-color {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background: none;
width: 0;
height: 0;
_width: 68px;
_height: 32px;
overflow: hidden;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-show-container .sunui-color-show .empty-color-up {
position: absolute;
top: 0;
right: 0;
border-top: 16px solid #FFFFFF;
border-right: 34px solid #FFFFFF;
border-left: 34px solid transparent;
border-bottom: 16px solid transparent;
_border-top: 16px solid #FFFFFF;
_border-right: 35px solid #FFFFFF;
_border-left: 35px solid transparent;
_border-bottom: 16px solid transparent;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-show-container .sunui-color-show .empty-color-down {
position: absolute;
bottom: 0;
left: 0;
border-top: 16px solid transparent;
border-right: 34px solid transparent;
border-left: 34px solid #FFFFFF;
border-bottom: 16px solid #FFFFFF;
_border-top: 16px solid transparent;
_border-right: 35px solid transparent;
_border-left: 35px solid #FFFFFF;
_border-bottom: 16px solid #FFFFFF;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-rgb {
height: 20px;
background: none;
font-size: 14px;
margin: 4px 0;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-rgb span {
display: inline-block;
vertical-align: middle;
height: 18px;
width: 24px;
line-height: 18px;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-rgb input {
width: 36px;
height: 18px;
*width: 34px;
*height: 16px;
_width: 36px;
_height: 18px;
border: 1px solid #666666;
background-color: #404040;
outline: 0 none;
vertical-align: middle;
color: #FFFFFF;
font-size: 12px;
line-height: 16px;
padding: 0;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-0xrgb {
height: 20px;
background: none;
font-size: 14px;
margin: 10px 0 0 0;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-0xrgb span {
display: inline-block;
vertical-align: middle;
height: 18px;
width: 16px;
line-height: 18px;
}
.sunui-color-container .sunui-color-rgb-container .sunui-color-0xrgb input {
width: 74px;
height: 18px;
*width: 72px;
*height: 16px;
_width: 74px;
_height: 18px;
border: 1px solid #666666;
background-color: #404040;
outline: 0 none;
vertical-align: middle;
color: #FFFFFF;
font-size: 12px;
line-height: 16px;
padding: 0;
}
.sunui-color-container .sunui-color-sure {
position: absolute;
right: 10px;
bottom: 10px;
width: 90px;
height: 30px;
*width: 88px;
*height: 28px;
_width: 90px;
_height: 30px;
border: 1px solid #FFFFFF;
border-radius: 15px;
text-align: center;
line-height: 27px;
color: #FFFFFF;
font-size: 14px;
cursor: pointer;
}
html代码
<div id="color-container" class="sunui-color-container">
<div id="color-area" class="sunui-color-area">
<span id="color-area-point" class="sunui-color-area-point"></span>
<span id="color-area-layer" class="sunui-color-area-layer"></span>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
</div>
<div class="sunui-color-index">
<div class="sunui-color-red2pink"></div>
<div class="sunui-color-pink2blue"></div>
<div class="sunui-color-blue2cyan"></div>
<div class="sunui-color-cyan2green"></div>
<div class="sunui-color-green2yellow"></div>
<div class="sunui-color-yellow2red"></div>
<div id="color-bar" class="sunui-color-bar-container">
<div class="sunui-color-bar sunui-color-bar-left"></div>
<div class="sunui-color-bar sunui-color-bar-right"></div>
</div>
<div id="color-index-layer" class="sunui-color-index-layer"></div>
</div>
<div class="sunui-color-rgb-container">
<div class="sunui-color-show-container">
<div class="sunui-color-text sunui-color-text-new">新的</div>
<div id="show-new" class="sunui-color-show sunui-color-show-new"></div>
<div id="show-current" class="sunui-color-show sunui-color-show-current"></div>
<div class="sunui-color-text sunui-color-text-current">当前</div>
<div id="web-safe" class="sunui-color-web-safe"><div></div></div>
</div>
<div class="sunui-color-rgb sunui-color-r"><span>R:</span><input id="rgb-r" type="text" maxlength="3"></div>
<div class="sunui-color-rgb sunui-color-g"><span>G:</span><input id="rgb-g" type="text" maxlength="3"></div>
<div class="sunui-color-rgb sunui-color-b"><span>B:</span><input id="rgb-b" type="text" maxlength="3"></div>
<div class="sunui-color-0xrgb"><span>#</span><input id="rgb0x" type="text" maxlength="6"></div>
</div>
<div id="color-sure" class="sunui-color-sure">确定</div>
</div>
Javascript代码
window.onload = function () {
var colorObj = {
barR: 255, barG: 0, barB: 0, // 纯彩色面板rgb
barY: 0,// 纯彩色面板bar的垂直位置
areaX: 255, areaY: 0,// 主面板pointer的位置
r: 255, g: 0, b: 0,// 合成rgb
rgb: 'FF0000',// 合成十六进制rgb
currentRgb: undefined// 当前十六进制rgb
};
var colorContainer = document.getElementById('color-container'),
colorArea = document.getElementById('color-area'),
colorAreaLayer = document.getElementById('color-area-layer'),
colorAreaPoint = document.getElementById('color-area-point'),
items = colorArea.getElementsByTagName('div'),
colorIndexLayer = document.getElementById('color-index-layer'),
colorBar = document.getElementById('color-bar'),
showNew = document.getElementById('show-new'),
showCurrent = document.getElementById('show-current'),
webSafe = document.getElementById('web-safe'),
colorSure = document.getElementById('color-sure'),
rgbR = document.getElementById('rgb-r'),
rgbG = document.getElementById('rgb-g'),
rgbB = document.getElementById('rgb-b'),
rgb0x = document.getElementById('rgb0x');
setShowCurrentColor(colorObj);
fillColor(items, colorObj);// 初始化主面板
colorObj = getColor(colorObj);
fillInput(colorObj);
dragEvent(colorIndexLayer, function (offsetX, offsetY) {
colorObj = getBarRgb(colorObj, offsetY);
colorObj = getColor(colorObj);
moveColorBar(colorObj);
fillColor(items, colorObj);
fillInput(colorObj);
});
dragEvent(colorAreaLayer, function (x, y) {
colorObj.areaX = x; colorObj.areaY = y;
colorObj = getColor(colorObj);
moveAreaPoint(colorObj);
fillInput(colorObj);
});
dragBarEvent(colorBar, function (offsetY) {
colorObj = getBarRgb(colorObj, offsetY);
colorObj = getColor(colorObj);
fillColor(items, colorObj);
fillInput(colorObj);
});
oninput(rgbR, function () {
if (document.activeElement === rgbR) {
if (rgbR.value === '') {
rgbR.value = 0;
}
if (!/^\d+$/gi.test(rgbR.value) || rgbR.value < 0 || rgbR.value > 255) {
rgbR.value = colorObj.r;
return;
}
if (rgbR.value == colorObj.r) {
return;
}
colorObj = getColorPosition(colorObj, rgbR.value, rgbG.value, rgbB.value);
moveColorBar(colorObj);
moveAreaPoint(colorObj);
fillColor(items, colorObj);
fillInput(colorObj);
}
});
oninput(rgbG, function () {
if (document.activeElement === rgbG) {
if (rgbG.value === '') {
rgbG.value = 0;
}
if (!/^\d+$/gi.test(rgbG.value) || rgbG.value < 0 || rgbG.value > 255) {
rgbG.value = colorObj.g;
return;
}
if (rgbG.value == colorObj.g) {
return;
}
colorObj = getColorPosition(colorObj, rgbR.value, rgbG.value, rgbB.value);
moveColorBar(colorObj);
moveAreaPoint(colorObj);
fillColor(items, colorObj);
fillInput(colorObj);
}
});
oninput(rgbB, function () {
if (document.activeElement === rgbB) {
if (rgbB.value === '') {
rgbB.value = 0;
}
if (!/^\d+$/gi.test(rgbB.value) || rgbB.value < 0 || rgbB.value > 255) {
rgbB.value = colorObj.b;
return;
}
if (rgbB.value == colorObj.b) {
return;
}
colorObj = getColorPosition(colorObj, rgbR.value, rgbG.value, rgbB.value);
moveColorBar(colorObj);
moveAreaPoint(colorObj);
fillColor(items, colorObj);
fillInput(colorObj);
}
});
oninput(rgb0x, function () {
if (document.activeElement === rgb0x) {
var val = rgb0x.value;
if (!/^[\dA-F]{6}$/gi.test(val)) {
return;
}
if (val == colorObj.rgb) {
return;
}
var arr = [hex2Decimal(val.substr(0, 2)), hex2Decimal(val.substr(2, 2)), hex2Decimal(val.substr(4, 2))];
colorObj = getColorPosition(colorObj, arr[0], arr[1], arr[2]);
moveColorBar(colorObj);
moveAreaPoint(colorObj);
fillColor(items, colorObj);
fillInput(colorObj);
}
});
webSafe.onclick = function () {
var r = colorObj.r, g = colorObj.g, b = colorObj.b;
colorObj = getColorPosition(colorObj, toSafeColor(r), toSafeColor(g), toSafeColor(b));
moveColorBar(colorObj);
moveAreaPoint(colorObj);
fillColor(items, colorObj);
fillInput(colorObj);
};
clickEvent(colorSure, function (down) {
if (down) {
colorSure.style.lineHeight = '29px';
} else {
colorSure.style.lineHeight = '27px';
colorObj.currentRgb = colorObj.rgb;
setShowCurrentColor(colorObj);
}
});
showCurrent.onclick = function () {
setShowCurrentColor(colorObj);
};
function moveColorBar(colorObj) {
colorBar.style.top = colorObj.barY + 'px';
}
function moveAreaPoint(colorObj) {
colorAreaPoint.style.left = colorObj.areaX + 'px';
colorAreaPoint.style.top = colorObj.areaY + 'px';
if (colorObj.areaY < 100) {
colorAreaPoint.style.borderColor = '#000000';
} else {
colorAreaPoint.style.borderColor = '#FFFFFF';
}
}
function fillInput(colorObj) {
rgbR.value = colorObj.r;rgbG.value = colorObj.g;rgbB.value = colorObj.b;
showNew.style.backgroundColor = '#' + colorObj.rgb;
rgb0x.value = colorObj.rgb;
}
function fillShowCurrent(colorObj) {
showCurrent.innerHTML = '';
showCurrent.style.background = '#' + colorObj.currentRgb;
}
function setShowCurrentColor(colorObj) {
var currentRgb = colorObj.currentRgb;
if (currentRgb) {
fillShowCurrent(colorObj);
var arr = [hex2Decimal(currentRgb.substr(0, 2)), hex2Decimal(currentRgb.substr(2, 2)), hex2Decimal(currentRgb.substr(4, 2))];
colorObj = getColorPosition(colorObj, arr[0], arr[1], arr[2]);
moveColorBar(colorObj);
moveAreaPoint(colorObj);
fillColor(items, colorObj);
fillInput(colorObj);
} else {
showCurrent.style.background = '#F00000';
showCurrent.innerHTML = '<div class="empty-color empty-color-up"></div><div class="empty-color empty-color-down"></div>';
}
}
};
function fillColor(items, colorObj) {
var r = colorObj.barR, g = colorObj.barG, b = colorObj.barB;
var iterations = Math.floor(items.length / 8);
var leftover = items.length % 8;
var i = 0, multiple = 2;
if (leftover > 0) {
do {
processLinearGradient(i * multiple, items[i++], r, g, b);
} while (--leftover > 0);
}
do {
processLinearGradient(i * multiple, items[i++], r, g, b);
processLinearGradient(i * multiple, items[i++], r, g, b);
processLinearGradient(i * multiple, items[i++], r, g, b);
processLinearGradient(i * multiple, items[i++], r, g, b);
processLinearGradient(i * multiple, items[i++], r, g, b);
processLinearGradient(i * multiple, items[i++], r, g, b);
processLinearGradient(i * multiple, items[i++], r, g, b);
processLinearGradient(i * multiple, items[i++], r, g, b);
} while (--iterations > 0);
}
function processLinearGradient(i, dom, r, g, b) {
setLinearGradient(dom, 255 - i, 255 - i, 255 - i,
Math.round(r * (1 - i / 255)), Math.round(g * (1 - i / 255)), Math.round(b * (1 - i / 255)));
}
function setLinearGradient(dom, r1, g1, b1, r2, g2, b2) {
try {
dom.style.background = 'linear-gradient(to right, #FFFFFF,#000000)';
setLinearGradient = function (dom, r1, g1, b1, r2, g2, b2) {
var rgb1 = '#' + decimal2Hex(r1) + decimal2Hex(g1) + decimal2Hex(b1);
var rgb2 = '#' + decimal2Hex(r2) + decimal2Hex(g2) + decimal2Hex(b2);
dom.style.background = 'linear-gradient(to right, ' + rgb1 + ',' + rgb2 + ')';
dom.style.filter = 'progid:DXImageTransform.Microsoft.Gradient(enabled=true,startColorStr=' + rgb1 + ',endColorStr=' + rgb2 + ',gradientType=1)';
}
} catch (e) {
setLinearGradient = function (dom, r1, g1, b1, r2, g2, b2) {
var rgb1 = '#' + decimal2Hex(r1) + decimal2Hex(g1) + decimal2Hex(b1);
var rgb2 = '#' + decimal2Hex(r2) + decimal2Hex(g2) + decimal2Hex(b2);
dom.style.filter = 'progid:DXImageTransform.Microsoft.Gradient(enabled=true,startColorStr=' + rgb1 + ',endColorStr=' + rgb2 + ',gradientType=1)';
}
}
return setLinearGradient(dom, r1, g1, b1, r2, g2, b2);
}
function getBarRgb(colorObj, offsetY) {
colorObj.barY = offsetY;
if (offsetY >= 0 && offsetY < 42) {
colorObj.barR = 255;colorObj.barG = 0;colorObj.barB = Math.round(offsetY * 256 / 42);
} else if (offsetY >= 42 && offsetY < 85) {
colorObj.barR = Math.round(255 - (offsetY - 42) * 256 / 43);colorObj.barG = 0;colorObj.barB = 255;
} else if (offsetY >= 85 && offsetY < 128) {
colorObj.barR = 0;colorObj.barG = Math.round((offsetY - 85) * 256 / 43);colorObj.barB = 255;
} else if (offsetY >= 128 && offsetY < 171) {
colorObj.barR = 0;colorObj.barG = 255;colorObj.barB = Math.round(255 - (offsetY - 128) * 256 / 43);
} else if (offsetY >= 171 && offsetY < 214) {
colorObj.barR = Math.round((offsetY - 171) * 256 / 43);colorObj.barG = 255;colorObj.barB = 0;
} else if (offsetY >= 214 && offsetY < 256) {
colorObj.barR = 255;colorObj.barG = Math.round(255 - (offsetY - 214) * 256 / 42);colorObj.barB = 0;
} else if (offsetY >= 256) {
colorObj.barR = 255;colorObj.barG = 0;colorObj.barB = 0;
}
return colorObj;
}
function getColor(colorObj) {
var r = colorObj.barR, g = colorObj.barG, b = colorObj.barB, x = colorObj.areaX, y = colorObj.areaY;
colorObj.r = Math.round(x * (r * (1 - y / 255) - (255 - y)) / 255 + (255 - y));
colorObj.g = Math.round(x * (g * (1 - y / 255) - (255 - y)) / 255 + (255 - y));
colorObj.b = Math.round(x * (b * (1 - y / 255) - (255 - y)) / 255 + (255 - y));
colorObj.rgb = rgb2HexColor(colorObj);
if (r === 255 && g === 0 && b === 0) {
if (colorObj.barY !== 256) {
colorObj.barY = 0;
}
} else if (r === 255 && g === 0) {
colorObj.barY = Math.round(b * 42 / 256);
} else if (g === 0 && b === 255) {
colorObj.barY = Math.round((255 - r) * 43 / 256 + 42);
} else if (r === 0 && b === 255) {
colorObj.barY = Math.round(g * 43 / 256 + 85);
} else if (r === 0 && g === 255) {
colorObj.barY = Math.round((255 - b) * 43 / 256 + 128);
} else if (g === 255 && b === 0) {
colorObj.barY = Math.round(r * 43 / 256 + 171);
} else if (r === 255 && b === 0) {
colorObj.barY = Math.round((255 - g) * 42 / 256 + 214);
}
return colorObj;
}
function getColorPosition(colorObj, r1, g1, b1) {
var r0 = colorObj.barR, g0 = colorObj.barG, b0 = colorObj.barB, x = 0, y = 0;
r1 = Number(r1); g1 = Number(g1); b1 = Number(b1);
if (r1 === g1 && r1 === b1) {
x = 0; y = 255 - r1;
} else if (r1 === g1 && r1 > b1) {
r0 = 255; g0 = 255; b0 = 0;
x = Math.round(255 - 255 * b1 / r1); y = 255 - r1;
} else if (r1 === g1 && r1 < b1) {
r0 = 0; g0 = 0; b0 = 255;
x = Math.round(255 - 255 * r1 / b1); y = 255 - b1;
} else if (r1 === b1 && r1 > g1) {
r0 = 255; g0 = 0; b0 = 255;
x = Math.round(255 - 255 * g1 / r1); y = 255 - r1;
} else if (r1 === b1 && r1 < g1) {
r0 = 0; g0 = 255; b0 = 0;
x = Math.round(255 - 255 * r1 / g1); y = 255 - g1;
} else if (g1 === b1 && g1 > r1) {
r0 = 0; g0 = 255; b0 = 255;
x = Math.round(255 - 255 * r1 / g1); y = 255 - g1;
} else if (g1 === b1 && g1 < r1) {
r0 = 255; g0 = 0; b0 = 0;
x = Math.round(255 - 255 * g1 / r1); y = 255 - r1;
} else if (r1 > g1 && r1 < b1) {
g0 = 0; b0 = 255;
x = Math.round(255 - 255 * g1 / b1); y = 255 - b1; r0 = Math.round(255 * (r1 - g1) / (b1 - g1));
} else if (r1 > b1 && r1 < g1) {
g0 = 255; b0 = 0;
x = Math.round(255 - 255 * b1 / g1); y = 255 - g1; r0 = Math.round(255 * (r1 - b1) / (g1 - b1));
} else if (g1 > r1 && g1 < b1) {
r0 = 0; b0 = 255;
x = Math.round(255 - 255 * r1 / b1); y = 255 - b1; g0 = Math.round(255 * (g1 - r1) / (b1 - r1));
} else if (g1 > b1 && g1 < r1) {
r0 = 255; b0 = 0;
x = Math.round(255 - 255 * b1 / r1); y = 255 - r1; g0 = Math.round(255 * (g1 - b1) / (r1 - b1));
} else if (b1 > r1 && b1 < g1) {
r0 = 0; g0 = 255;
x = Math.round(255 - 255 * r1 / g1); y = 255 - g1; b0 = Math.round(255 * (b1 - r1) / (g1 - r1));
} else if (b1 > g1 && b1 < r1) {
r0 = 255; g0 = 0;
x = Math.round(255 - 255 * g1 / r1); y = 255 - r1; b0 = Math.round(255 * (b1 - g1) / (r1 - g1));
}
colorObj.barR = r0; colorObj.barG = g0; colorObj.barB = b0; colorObj.areaX = x; colorObj.areaY = y;
return getColor(colorObj);
}
function rgb2HexColor(rgb) {
return decimal2Hex(rgb.r) + decimal2Hex(rgb.g) + decimal2Hex(rgb.b);
}
function decimal2Hex(num) {
var hex = Number(num).toString(16).toUpperCase();
return hex.length === 1 ? '0' + hex : hex;
}
function hex2Decimal(hex) {
return parseInt(hex, 16);
}
function toSafeColor(num) {
if (num < 26) {
num = 0;
} else if (num < 77) {
num = 51;
} else if (num < 128) {
num = 102;
} else if (num < 179) {
num = 153;
} else if (num < 230) {
num = 204;
} else {
num = 255;
}
return num;
}
function clickEvent(dom, func) {
var el = dom.setCapture ? dom : document;
dom.onmousedown = function (ev) {
dom.focus();
func(true);
el.onmouseup = function () {
func(false);
el.onmouseup = null; if(dom.releaseCapture) {dom.releaseCapture();}
};
if(dom.setCapture) {dom.setCapture();}
return false;
};
}
function dragEvent(dom, func) {
var disX = 0,disY = 0, clientX = 0, clientY = 0, dx = 0, dy = 0;
var el = dom.setCapture ? dom : document;
dom.onmousedown = function (ev) {
dom.focus();
var oEvent = ev || window.event;
disX = dx = oEvent.offsetX || oEvent.layerX || 0; disY = dy = oEvent.offsetY || oEvent.layerY || 0;
clientX = oEvent.clientX; clientY = oEvent.clientY;
var timeoutFunc = function () {
func(dx, dy);
};
var dateDown = +new Date();
var timeout = null;
timeoutFunc();
el.onmousemove = function (ev) {
var oEvent = ev || window.event;
if(oEvent.stopPropagation) {
oEvent.stopPropagation();
} else {
oEvent.cancelBubble = true;
}
dx = disX + oEvent.clientX - clientX; dy = disY + oEvent.clientY - clientY;
if (dx < 0) {dx = 0} else if (dx > dom.offsetWidth - 1) {dx = dom.offsetWidth - 1}
if (dy < 0) {dy = 0} else if (dy > dom.offsetHeight - 1) {dy = dom.offsetHeight - 1}
var dateMove = +new Date();
if (dateMove - dateDown > 50) {
dateDown = dateMove;
timeout = window.setTimeout(timeoutFunc, 30);
}
return false;
};
el.onmouseup = function () {
window.clearTimeout(timeout);
timeoutFunc();
el.onmousemove = null; el.onmouseup = null; if(dom.releaseCapture) {dom.releaseCapture();}
};
if(dom.setCapture) {dom.setCapture();}
return false;
};
}
function dragBarEvent(dom, func) {
var offsetTop = 0, clientY = 0, dy = 0;
var el = dom.setCapture ? dom : document,
parent = dom.offsetParent;
dom.onmousedown = function (ev) {
dom.focus();
var oEvent = ev || window.event;
offsetTop = dom.offsetTop + Math.round(dom.offsetHeight / 2);
clientY = oEvent.clientY;
var timeoutFunc = function () {
func(dy);
};
timeoutFunc();
var timeout = null;
var clear = true;
el.onmousemove = function (ev) {
var oEvent = ev || window.event;
if(oEvent.stopPropagation) {
oEvent.stopPropagation();
} else {
oEvent.cancelBubble = true;
}
dy = offsetTop + oEvent.clientY - clientY;
if (dy < 0) {dy = 0} else if (dy > parent.offsetHeight - 1) {dy = parent.offsetHeight - 1}
dom.style.top = dy + 'px';
if (clear) {
clear = !clear;
window.clearTimeout(timeout);
}
timeout = window.setTimeout(timeoutFunc, 40);
return false;
};
el.onmouseup = function () {
window.clearTimeout(timeout);
timeoutFunc();
el.onmousemove = null; el.onmouseup = null; if(dom.releaseCapture) {dom.releaseCapture();}
};
if(dom.setCapture) {dom.setCapture();}
return false;
};
}
function oninput(node, callback){
if(document.addEventListener){
node.addEventListener('input',callback, false);
if(/MSIE 9\.0/.test(window.navigator.userAgent)){
var selectionchange = function(){
callback.call(node);
};
node.addEventListener('focus',function(){
document.addEventListener('selectionchange',selectionchange,false);
},false);
node.addEventListener('blur',function(){
document.removeEventListener('selectionchange',selectionchange,false);
},false);
}
} else {
node.attachEvent('onpropertychange',function(e){
if(e.propertyName === 'value'){
callback.call(node, node);
}
});
}
}
扫一扫
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
