<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Commutator</title>
<style>
#cmt {
left: 20px;
position: absolute;
top: 60px;
width:120px;
}
#lef {
left: 7px;
top:50px;
width:30px;
}
#med {
left: 65px;
top:25px;
width:30px;
}
#rig {
left: 130px;
top:50px;
width:50px;
}
.lab {
background-color: grey;
border-color: black;
border-radius: 15px;
box-shadow: 4px 4px 2px #373737;
color:white;
font-family:verdana;
position: absolute;
text-align: center;
}
@-webkit-keyframes clk1 {
from {-webkit-transform: rotate(-45deg);}
to {-webkit-transform: rotate(0deg);}
}
@-webkit-keyframes clk2 {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(45deg);}
}
@-webkit-keyframes aclk1 {
from {-webkit-transform: rotate(45deg);}
to {-webkit-transform: rotate(0deg);}
}
@-webkit-keyframes aclk2 {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(-45deg);}
}
</style>
</head>
<body>
<img id="cmt" src="./cmt.jpg" onclick="rot(event)">
<span class="lab" id="med">1</span>
<span class="lab" id="lef">0</span>
<span class="lab" id="rig">Auto</span>
<script>
var but=document.getElementById("cmt").style;
but.WebkitAnimation = "aclk2 0.2s linear 1 forwards";
window.location.href="./knb.php?mod=0";
var pos=0;
function rot(event) {
var x = event.clientX;
switch(pos) {
case 0:
if(x>80 ) {
but.WebkitAnimation = "clk1 0.2s linear 1 forwards";
pos++;
}
break;
case 1:
if(x>80 ) {
but.WebkitAnimation = "clk2 0.2s linear 1 forwards";
pos++;
}
else {
but.WebkitAnimation = "aclk2 0.2s linear 1 forwards";
pos--;
}
break;
case 2:
if(x<80 ) {
but.WebkitAnimation = "aclk1 0.2s linear 1 forwards";
pos--;
}
break;
}
window.location.href="./knb.php?mod=" + pos;
}
</script>
</body>
</html>
Lecture du code à suivre
samedi 18 juillet 2015
Commutateur animé à 3 positions
Cette page http://sin.nexgate.ch/knb3/knb.html illustre le résultat du code qui suit. La position du commutateur - 0, 1 ou 2 - est enregistrée ici http://sin.nexgate.ch/knb3/knb.txt. Le script php invoqué et réalisant l'enregistrement est similaire à celui du billet Un potentiomètre sur une page web.
Inscription à :
Publier les commentaires (Atom)
Aucun commentaire:
Enregistrer un commentaire