Mouvement d'une div
Résolu
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 :
--
Cordiallement Aka13
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>
--
Cordiallement Aka13
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 -
J'ai essayer sa ne fonctionne pas, quelqu'un serais m'aider en me passant un script :x
-
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>
