Mouvement d'une div

Résolu/Fermé

Aka13 Messages postés 153 Date d'inscription jeudi 18 juin 2009 Statut Membre Dernière intervention 8 février 2016 - 24 mai 2011 à 07:32
Aka13 Messages postés 153 Date d'inscription jeudi 18 juin 2009 Statut Membre Dernière intervention 8 février 2016 - 24 mai 2011 à 15:43

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 :

<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 Excel
#Div/0 excel moyenne - Guide
Remplacer #div0 par le chiffre 0 - Forum Bureautique

4 réponses

Réponse 1 / 4

Aka13 Messages postés 153 Date d'inscription jeudi 18 juin 2009 Statut Membre Dernière intervention 8 février 2016 8
Modifié par Aka13 le 24/05/2011 à 15:45

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>

Réponse 2 / 4

Niveres Messages postés 72 Date d'inscription lundi 9 mai 2011 Statut Membre Dernière intervention 15 janvier 2012 9
24 mai 2011 à 08:45

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

Réponse 3 / 4

Aka13 Messages postés 153 Date d'inscription jeudi 18 juin 2009 Statut Membre Dernière intervention 8 février 2016 8
24 mai 2011 à 12:28

J'ai essayer sa ne fonctionne pas, quelqu'un serais m'aider en me passant un script :x

Réponse 4 / 4

Niveres Messages postés 72 Date d'inscription lundi 9 mai 2011 Statut Membre Dernière intervention 15 janvier 2012 9
24 mai 2011 à 14:17

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>

Niveres Messages postés 72 Date d'inscription lundi 9 mai 2011 Statut Membre Dernière intervention 15 janvier 2012 9
24 mai 2011 à 14:19

Copie colle dans un éditeur de texte, ce sera plus visible...
Je viens de le faire, il faut que tu mette ta souris sur le div pour qu'il bouge.

Cordialement,

Niveres

Discussions similaires

comment remplacer un #div/0! par une cellule vide

erreur (#DIV/0) formule MOYENNE.SI.ENS

Relier une enceinte à un détecteur de mouvement

enlever les #DIV/0! dans une colonne calcul d'un tableau croisé

/!\ Mon Minecraft se floue quand je bouge la souris /!\