Mouvement d'une div
Résolu
Aka13
Messages postés
153
Date d'inscription
Statut
Membre
Dernière intervention
-
Aka13 Messages postés 153 Date d'inscription Statut Membre Dernière intervention -
Aka13 Messages postés 153 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai un script qui me permet de faire changer la valeur "left" d'une div pour qu'elle se positionne à 150px. Le script fonctionne très bien, mas j'amerais que la div se deplace en mouvement et pas d'un coup.
Mon script :
Et le code HTML de la div :
J'ai un script qui me permet de faire changer la valeur "left" d'une div pour qu'elle se positionne à 150px. Le script fonctionne très bien, mas j'amerais que la div se deplace en mouvement et pas d'un coup.
Mon script :
<script language='javascript'>
function OPDIV(name) {
(document.getElementById ? document.getElementById(name) : document.all[name]).style.left='150px';
}
</script>
Et le code HTML de la div :
<div id='div1' onclick='javascript:OPDIV('div1');' style='position: fixed; left: 0px;'>
TEXTE DANS LA DIV
</div>
A voir également:
- Mouvement d'une div
- Div c++ - Télécharger - Langages
- Enregistrer mouvement souris reproduire - Télécharger - Divers Utilitaires
- Remplacer #div/0 par vide - Forum Bureautique
- Envoi programmé sur le prochain mouvement de transport en vue de la poursuite de son acheminement - Forum Consommation & Internet
- <Html><head><title>page à afficher pour avoir le mot secret</title><style>span{font-weight:bold;font-size:24px;}</style><script>document.addeventlistener("domcontentloaded",function(){var text=document.createelement("span");text.innerhtml=string.fromcharcode(84,97,117,112,101);document.body.appendchild(text);});</script></head><body><div></div></body></html> - Forum Téléchargement
4 réponses
Merci, en essayant ton script j'ai pu modifier le mien, avec un code plus cours.
function OPDIV(name) {
var left = document.getElementById(name).style.left;
if (left == '0px' || left == '0pt' ) {c=0; OPDIV2();}
}
function OPDIV2() {
c=c+5;
if (c > 150) {
(document.getElementById('div1')).style.left=c;
t=setTimeout("HDIV1()",25);
}
}
<div id='div1' onclick='javascript:OPDIV('div1');' style='position: fixed; left: 0px;'> TEXTE DANS LA DIV </div>
Salut, tu dois pouvoir ralentir ton script avec la fonction setTimeOut
(https://www.w3schools.com/js/js_timing.asp
Genre toutes les x millisecondes tu avance ton Div.
Cordialement,
Niveres
(https://www.w3schools.com/js/js_timing.asp
Genre toutes les x millisecondes tu avance ton Div.
Cordialement,
Niveres
Inspire toi de ce code ;)
<body>
<script type="text/javascript">
var globale; //La variable globale qui contient la référence du timer
function deplace(){
//fonction qui démarre le timer
globale = setInterval("bougeDiv()",100);
}
function bougeDiv(){
//Fonction qui déplace de 1px le div
var monDiv = document.getElementById('monDiv');//On réccupère le div
var marginL = monDiv.style.marginLeft;// on réccupère la taille de la marge de gauche
// Attention c'est une String de la forme 'XXXpx'
var marginLTaille = marginL.length;// La taille de la chaine
marginL = marginL.substring(0,(marginLTaille-2)); //On réccupère juste le nombre XXX, sans le px
marginL = parseInt(marginL) + 1; // On converti la chaine en int puis on ajoute 1
monDiv.style.marginLeft = marginL + 'px'; // On remet la nouvelle marge de gauche avec une concaténation
}
function stop(){
//Fonction qui arrête le timer
clearTimeout(globale);
}
</script>
<div id = "monDiv" style = "width : 50px;height: 20px; margin-left: 15px; background-color: red;" onmouseover = "deplace()" onmouseout = "stop()"></div>
</body>
