hex farbe,wie Funktioniert es
Ich will ja mal eine Homepage bauen,wo ein Auto mit drehender Felge zu sehen ist.
Der benutzer soll mit den Felgenfarben rumspielen dürfen.
Deshalb wollte ich ein Script haben,wo ich von mir ausdenke ,das man da einfacher drauf zu greifen kann..
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<style>
#hint{
position:absolute;
left:200px;
top:50px;
background:red;
width:200px;
height:100px;
display:none;
}
p{
font-size:30px;
color:yellow;
text-align:center;
margin-top:12px;
}
#wrapper {
position:absolute;
top:100px;
display:inline-block;
background-color:blue;
border-radius: 50%;
animation:dreh 4s infinite linear;
animation-play-state: paused;
}
#wahldiv{
padding-bottom:30px;
position:absolute;
left:100px;
}
#fahrdiv{
position:absolute;
top:100px;
width:0px;
height:0px;
display:inline-block;
background-color:green;
border-radius: 50%;
animation-play-state: paused;
}
@keyframes fahr {
from {left:0px; }
to {left:350px; }
}
@keyframes jump {
0%{top:100px;left:0px; }
10%{top:0px;left:100px; }
20%{top:100px;left:100px; }
30%{top:0px;left:200px; }
40%{top:100px;left:200px; }
50%{top:0px;left:300px; }
60%{top:100px;left:300px; }
70%{top:0px;left:200px; }
80%{top:100px;left:200px; }
90%{top:0px;left:100px; }
100%{top:100px;left:0px; }
}
//#felge { animation:dreh 4s infinite linear; }
@keyframes dreh {
from {transform: rotate( 0deg); }
to {transform: rotate(360deg); }
}
@keyframes dreh1 {
from {transform: rotate( 0deg); }
to {transform: rotate(-360deg); }
}
#felge {
position: relative;
// display: inline-block;
width: 200px; height: 200px;
border-radius:50%;
border:10px solid red;
}
span {
position: absolute;
left:100px;
transform-origin: bottom;
z-index: -100;
}
.speiche{ box-shadow: black 0 0 0 5px;
height: 100px; top: 0px; }
.speiche1{ transform: rotate(45deg);}
.speiche2{ transform: rotate(90deg);}
.speiche3{ transform: rotate(135deg);}
.speiche4{ transform: rotate(180deg);}
.speiche5{ transform: rotate(225deg);}
.speiche6{ transform: rotate(270deg);}
.speiche7{ transform: rotate(315deg);}
.speiche8{ transform: rotate(360deg);}
.speiche9{ transform: rotate(22.5deg);}
.speiche10{ transform: rotate(67.5deg);}
.speiche11{ transform: rotate(112.5deg);}
.speiche12{ transform: rotate(157.5deg);}
.speiche13{ transform: rotate(202.5deg);}
.speiche14{ transform: rotate(247.5deg);}
.speiche15{ transform: rotate(292.5deg);}
.speiche16{ transform: rotate(337.5deg);}
b{
position:absolute;
top:4px;
left:4px;
}
span#mitte{
posision:absolute;
background:red;
height:40px;
width:40px;
border-radius:50%;
border:3px solid black;
top:77px;
left:77px;
text-align: center;
font-size:26px;
z-index:110;
}
</style>
<div id="hint"></div>
<div id="wahldiv">
<input type="color" id="color1" name="color1" value="#012548">
<input type="color" id="color2" name="color2" value="#645875">
<input type="color" id="color3" name="color3" value="#132548">
<select id="wahl" name="wahl">
<option value="4">4 speichen</option>
<option value="5">5 speichen</option>
<option value="7">7 speichen</option>
<option value="8">8 Speichen</option>
<option value="9">9 Speichen</option>
<option value="12">12 Speichen</option>
<option value="16">16 speichen </option>
</select>
<button id="play">Play</button>
<button id="stopa">Stop</button>
<button id="back">Back</button>
<br>
<input type="color" id="color4" name="color4" value="#c12548">
<input type="color" id="color5" name="color5" value="#c12548">
<select id="border" name="border">
<option value="solid">Solid </option>
<option value="dotted">dotted</option>
<option value="dashed">dashed</option>
<option value="double">double</option></select>Emblem:<input type="text" id="text" name="text" size="2" value="Sk" ><button id="jump">JumpStart</button><button id="fahr">FahrStart</button></div>
<div id="fahrdiv"><div id="wrapper">
<div id="felge">
<span class="speiche speiche1 acht zwolf"></span>
<span class="speiche speiche2 acht vier"></span>
<span class="speiche speiche3 acht zwolf"></span>
<span class="speiche speiche4 acht vier"></span>
<span class="speiche speiche5 acht zwolf"></span>
<span class="speiche speiche6 acht vier funf"></span>
<span class="speiche speiche7 acht zwolf funf"></span>
<span class="speiche speiche8 acht vier funf"></span>
<span class="speiche speiche9 vier funf"></span>
<span class="speiche speiche10 vier funf neun"></span>
<span class="speiche speiche11 vier funf neun"></span>
<span class="speiche speiche12 vier funf neun"></span>
<span class="speiche speiche13 vier funf neun"></span>
<span class="speiche speiche14 vier funf neun"></span>
<span class="speiche speiche15 vier funf neun"></span>
<span class="speiche speiche16 vier funf neun"></span>
<span id="mitte"> </span>
</div> </div> </div>
<script>
function auswahl(){
$(".speiche").css("display","block");
var was=document.getElementsByName("wahl")[0].value;
var color1=document.getElementsByName("color1")[0].value;
var color2=document.getElementsByName("color2")[0].value;
var color3=document.getElementsByName("color3")[0].value;
var color4=document.getElementsByName("color4")[0].value;
var color5=document.getElementsByName("color5")[0].value;
var border=document.getElementsByName("border")[0].value;
$("span#mitte").css("background-color",color4);
$("span#mitte").css("border-color",color5);
$("span#mitte").css("border-style",border);
$("#felge").css("border-color", color1);
$("#wrapper").css("background-color", color2);
$(".speiche").css("box-shadow", color3+" 0 0 0 5px");
if(was==8){$(".acht").css("display","none");}
if(was==12){$(".zwolf").css("display","none");}
if(was==4){$(".vier").css("display","none");}
if(was==5){$(".funf").css("display","none");
$(".speiche1").css("transform","rotate(72deg)");
$(".speiche2").css("transform","rotate(144deg)");
$(".speiche3").css("transform","rotate(216deg)");
$(".speiche4").css("transform","rotate(288deg)");
$(".speiche5").css("transform","rotate(360deg)");
}
if(was==9){$(".neun").css("display","none");
$(".speiche1").css("transform","rotate(40deg)");
$(".speiche2").css("transform","rotate(80deg)");
$(".speiche3").css("transform","rotate(120deg)");
$(".speiche4").css("transform","rotate(160deg)");
$(".speiche5").css("transform","rotate(200deg)");
$(".speiche6").css("transform","rotate(240deg)");
$(".speiche7").css("transform","rotate(280deg)");
$(".speiche8").css("transform","rotate(320deg)");
$(".speiche9").css("transform","rotate(360deg)");
}
}
function stoppen(){
$("#wrapper").css("animation-play-state","paused");
}
function run(){
$("#wrapper").css("animation","dreh 4s infinite linear");
}
function runback(){
$("#wrapper").css("animation","dreh1 4s infinite linear");
}
s=true;
l=true;
function fahrlos(){
if(l==true){
$("#fahrdiv").css("animation-play-state","running");
$("#fahrdiv").css("animation","fahr 4s infinite alternate-reverse forwards linear");
document.getElementById("fahr").innerHTML="FahrStop";
return l=false;
}
if(l==false){
$("#fahrdiv").css("animation-play-state","paused");
document.getElementById("fahr").innerHTML="Fahrstart";
return l=true;
}
}
function jumpen(){
if(s==true){
document.getElementById("jump").innerHTML="JumpStop";
$("#fahrdiv").css("animation-play-state","paused");
$("#fahrdiv").css("animation","jump 4s infinite linear");
return s=false;
}
if(s==false){
$("#fahrdiv").css("animation-play-state","paused");
document.getElementById("jump").innerHTML="JumpStart";
return s=true;
}
}
wahl.onchange=auswahl
color1.onchange=auswahl
color2.onchange=auswahl
color3.onchange=auswahl
color4.onchange=auswahl
color5.onchange=auswahl
play.onclick=run
back.onclick=runback
fahr.onclick=fahrlos
stopa.onclick=stoppen
border.onchange=auswahl
jump.onclick=jumpen
function texten(){
var text=document.getElementsByName("text")[0].value;
$("span#mitte").html("<b>"+text+"</b>");
}
text.onchange=texten
</script>