-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathindex.html
52 lines (41 loc) · 1.79 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<html style="background-image:url(background.png);">
<head>
<title>jquery color mixer</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery-color/jquery.color.js"></script>
<script type="text/javascript" src="color_mixer.js"></script>
<script type="text/javascript">
$(function(){
$("button").on("click",function(){
//initialize a jquery color object
color1 = $.Color($('#color1').val());
//set color alpha value
color1 = color1.alpha(parseFloat($('#color1_alpha').val()));
color2 = $.Color($('#color2').val());
color2 = color2.alpha(parseFloat($('#color2_alpha').val()));
//Mixing colors
color = Color_mixer.mix(color1,color2);
//set background color to result color
$("html body").css("background-color",color.toRgbaString());
});
$('#color1').on("change",function(){
$(this).next().css("background-color",$('#color1').val());
})
$('#color2').on("change",function(){
$(this).next().css("background-color",$('#color2').val());
})
});
</script>
</head>
<body>
<input id="color1" placeholder="color 1" value="#F5FF00" style="float:left">
<input id="color1_alpha" placeholder="alpha" style="float:left">
<div style="height:20px;width:20px;background-color:#F5FF00;float:left;"></div>
<div style="clear:both;"></div>
<input id="color2" placeholder="color 2" value="#00C2FF" style="float:left;">
<input id="color2_alpha" placeholder="alpha" style="float:left">
<div style="height:20px;width:20px;background-color:#00C2FF;float:left;"></div>
<div style="clear:both;"></div>
<button>MIX!</button>
</body>
</html>