Bonjour,
Je souhaiterai connaître l'astuce pour pouvoir controler le déplacement d'un calque :
J'ai un bouton "deplacer" qui fonctionne en entrant une donnée en pixel dans un champs texte.
- J'ai un bouton "auto" que je souhaiterai faire fonctionné qui lancerai le calque automatiquement.
Mon problème c'est que j'aurais besoin de connaître comment faire pour
- que mon calque s'arrête au bord de la fenêtre, qu'il butte à droite par exemple et revienne à gauche et etc....
- J'ai également un champ texte "vitesse" qui afficherai la vitesse de déplacement!!!!!
au fait j'ai aussi un bouton "gauche" et droite" mais cela fonctionnent bien....
Ca fait beaucoup de chose mais j'aimerai vraiment connaître la façon dont je pourrais me dépatouiller (voici le code déjà utilisé):
function deplacer (sens,pas){
var valeur_deplacement = 0;
switch(sens){
case "gauche" :
valeur_deplacement = pas *(-1);
break;
case "droite" :
valeur_deplacement = pas;
break;
default:
valeur_deplacement = pas;
break;
}
document.getElementById('vertige').style.left= parseInt(document.getElementById('vertige').style.left)+ valeur_deplacement;
}
//fonction pour le champs texte
function deplacerHorizontal(sens,pas){//sens : -1 ou 1
//va chercher dans le document la valeur du champ valeur (value du champs valeur)
var pas = document.getElementById("valeur").value;
var valeur_deplacement = sens*pas;
document.getElementById('vertige').style.left= parseInt(document.getElementById('vertige').style.left)+ valeur_deplacement;
}
/*function dimWindow(height,width){
var stopRight=height*width;
document.getElementById('vertige').style.position=screen.write(document.getElementById('vertige').style.position;
}*/
function bouge(sens){//sens : -1 ou 1
//va chercher dans le document la valeur du champ valeur (value du champs valeur)
var pas = document.getElementById("valeur").value;
var valeur_deplacement = sens*pas;
document.getElementById('vertige').style.left= parseInt(document.getElementById('vertige').style.left)+ valeur_deplacement;
// récupère la valeur du timeout
idTimer=setTimeout("bouge("+ sens +")",1000);
}
function stop(){
//veut faire un cleartimeout de l'id timer qui a été lancé
clearTimeout(idTimer);
}
/*function moveCalque() {
var calque = document.getElementById("vertige");
var current_position=parseInt(calque.style.left);
alert(current_position); // valeur en numerique
if(current_position<=mini){
direction=1;
}
else {
if(current_position>=maxi){
direction=-1;
}
}
current_position +=(step*direction);
calque.style.left=current_position + "px";
}*/
mouvement=false;
</script>
</head>
<body>
<div id="vertige" style="position:absolute; left:283px; top:32px; width:192px; height:128px; z-index:1; background-color: #9900CC; layer-background-color: #9900CC; border: 1px none #000000;"></div>
<table width="800" border="0">
<tr>
<td width="400
"><p> </p>
<p> </p> </td>
</tr>
<tr>
<td><p>
<input name="button" type="button" id="button" value="gauche"onClick="deplacerHorizontal(1)">
<input name="button" type="submit" id="button" value="deplacer"onClick="if(!mouvement) { bouge('1'); mouvement=true;}">
<input name="button" type="submit" id="button" value="auto">
<input name="button" type="button" id="button" value="droite"onClick="deplacerHorizontal(-1)">
<strong>PAS
:
<input name="valeur" type="text" id="valeur" value="10"class="champs">
VITESSE :
<input name="vitesse" type="text" id="vitesse" value="0"class="champs">
</strong></p>
<p>
<input name="button" type="submit" id="button" value="stop"onClick="if(mouvement) { stop(); mouvement= false;}">
</p></td>
</tr>
</table>
</body>
</html>
Si quelqu'un avait la solution, ça serait vraiment très gentil de me sortir de ce code!!!!!!!
Merci d'avance!
LN
