我正在研究一个有 6 种颜色的混色器。当您单击其中的 2 个时，它会显示混合两种颜色的油漆并将它们放在一起时的颜色。
我想知道如何让它在你点击两个东西时显示输出。
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Mixer</title>
</head>
<body>
<div id="greendiv"></div>
<div id="bluediv"></div>
<div id="yellowdiv"></div>
<div id="reddiv"></div>
<div id="purplediv"></div>
<div id="orangediv"></div>
<p id="separator">------------------------------------------
</body>
</html>
和 CSS
#greendiv {
background-color:green;
width: 100px;
height: 200px;
margin-left: 360px;
}
#bluediv {
background-color:blue;
width: 100px;
height: 200px;
margin-left: 120px;
margin-top: -200px;
}
#yellowdiv {
background-color:yellow;
width: 100px;
height: 200px;
margin-left: 240px;
margin-top: -200px;
}
#reddiv {
background-color: #E42217;
height: 200px;
width: 100px;
margin-top: -200px
}
#purplediv {
background-color: purple;
height: 200px;
width: 100px;
margin-left: 480px;
margin-top: -200px;
}
#orangediv {
background-color: orange;
height: 200px;
width: 100px;
margin-left: 600px;
margin-top: -200px;
}
#separator {
font-size: 50px;
color: #565051;
margin-top: -15px
}
#reddiv:hover {
background-color: #C11B17
}
最佳答案
我正在使用 JQuery XColor 进行颜色混合..
请看这个 fiddle :选择 2 个元素并点击“Get Mix”按钮 http://jsfiddle.net/jFIT/X4Qgf/6/
function getMix() {
var colors = $('.selected');
var col1 = rgb2hex($(colors[0]).css('background-color'));
var col2 = rgb2hex($(colors[1]).css('background-color'));
console.log(colors);
var additiveColor = ($.xcolor.average(col1, col2).getHex());
console.log(col1 + ' AND ' + col2);
console.log(' = ' + additiveColor);
$('#result').css('background-color', additiveColor);
}
对于这一行:
var additiveColor = ($.xcolor.average(col1, col2).getHex());
您可以通过将 .average( 更改为您想要在此处记录的任何内容来使用多种不同的颜色计算:http://www.xarg.org/project/jquery-color-plugin-xcolor/(即加法、减法等)
这就是你想要的吗？？
关于javascript - 创建显示两种组合颜色结果的混色器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22661090/