Image mobile rebondissante

Télécharger le projet
Commenter

Description

C'est une image mobile qui rebondit sur les bords de la fenêtre. Vous pouvez modifier la vitesse ligne 14. Il vous faut remplacer "mon_image.jpg" (ligne 7) par l'URL de l'image de votre choix. Les explications sont dans la source !

Source / Exemple : 


<html>
<head>
<title>une image qui rebondit !</title>
</head>
<body onLoad="bang()"><!--déclenchement de la fonction au chargement de la page-->
<div id="bing" style="position:absolute;">
<img src="mon_image.jpg" alt="bing" /><!--remplacer "mon_image.jpg" par l'URL de l'image de votre choix-->
</div>
<script type="text/javascript">
abcisse = 0;//abcisse du coin supérieur gauche de l'image
ordonnee = 0;//ordonnee du coin supérieur gauche de l'image
nx = 1;//changement de l'abcisse
ny = 1;//changement de l'ordonnee
vitesse = 15;//vitesse du mouvement : vous pouvez changer cette valeur
function bang() {
document.getElementById("bing").style.left = abcisse;//positionnement horizontal de l'image
document.getElementById("bing").style.top = ordonnee;//positionnement vertical de l'image
largeur = (navigator.appName != "Microsoft Internet Explorer")? window.innerWidth : document.body.offsetWidth;//la variable largeur a pour valeur la largeur de la fenêtre
hauteur = (navigator.appName != "Microsoft Internet Explorer")? window.innerHeight : document.body.offsetHeight;//la variable hauteur a pour valeur la hauteur de la fenêtre
bas = (navigator.appName != "Microsoft Internet Explorer")? document.getElementById('bing').clientHeight : document.getElementById('bing').offsetHeight;//la variable bas contient la hauteur de l'image
droite = (navigator.appName != "Microsoft Internet Explorer")? document.getElementById('bing').clientWidth : document.getElementById('bing').offsetWidth;//la variable droite contient la largeur de l'image
//début du code essentiel
if ((ordonnee + bas) >= hauteur) ny = -1;
if ((abcisse + droite) >= largeur) nx = -1;
if (ordonnee <= 0) ny = 1;
if (abcisse <= 0) nx = 1;
abcisse += nx;
ordonnee += ny;
//fin
setTimeout('bang()',vitesse);//la fonction se rappelle d'elle-même par un temps en millisecondes défini par la variable vitesse
}
</script>
</body>

</html>

Conclusion :


Aucun bug connu... Compatible avec tous les navigateurs !
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_peter1789)