Fond d'écran défilant avec fonction marche/arrêt ( ajout jquery )

Télécharger le projet
Commenter

Description

Un petit bout de code qui pourrait être
utile à tous dans diverses applications
au sein d'un site internet....

Source / Exemple : 


<?php

/**


     
  •  @author Yann-Guilhem Guichard

    •  
  •  @copyright 2009

    •  
  • /


echo'
<html>
<head>
	<title>Défilement et arrêt du fond d\'écran par survol de souris</title>
	<style type="text/css">
		body {
			background-image:url(http://www.google.com/intl/fr_all/images/logo.gif);
		}
		#divCopyright {
			float:left;
			background:#FFFFFF;
			border:solid #000000 1px;
			padding:12px;
			width:200px;
			margin-bottom:24px;
		}
		#divPresentation {
			clear:left;
			float:right;
			background:#FFFFFF;
			border:solid #000000 1px;
			padding:12px;
			width:300px;
		}
	</style>
	<script type="text/javascript" src="./jquery-1.3.1.js"></script>
	<script type="text/javascript">
		var largeur = 0;
		var hauteur = 0;
		var largeurMaximum = screen.width;
		var hauteurMaximum = screen.height;
		var défilement;
		
		function defiler()
		{
			if ((largeur >= 0) && (largeur < largeurMaximum)) 
			{
				largeur++;
			} 
			else 
			{
				largeur = 0;
			}
		
			if ((hauteur >= 0) && (hauteur < hauteurMaximum)) 
			{
				hauteur++;
			} 
			else 
			{
				hauteur = 0;
			}
		
			$("body").css("background-position",largeur+" "+hauteur);
		}
		
		$(document).ready
		(
			function() 
			{
				$(document).mouseover( 	function(){ 
													defilement = setInterval("defiler()",5); 
													$("#divPresentation").css( {border:"2px solid red"} );
												}	);
				$(document).mouseout(	function(){ 
													clearInterval(defilement); 
													$("#divPresentation").css( {border:"2px solid green"} );
												}	);
				

			}
		);
		
	</script>
</head>

<body>
  <div id="divCopyright">
   	<p>
© COPYRIGHT - <a href="http://debbog.free.fr">DEBBOG</a>
	</p>
  </div>
  <div id="divPresentation">
   	<p>
Un petit bout de code qui pourrait être<br>utile à tous dans diverses applications<br>au sein d\'un site internet...
	</p>
	<img src="http://img443.imageshack.us/img443/5742/apercuqb0.gif" />
  </div>
</body>
</html>
';

?>

Conclusion :


Le code est très simple dans son ensemble, rien de bien nouveau en lui-même, il servira à faire défiler le fond d'écran et à l'arrêter à volonté....

Il reprend la hauteur et la largeur maximum de l'écran c'est automatique.

[ Ajout de JQuery que je commence aussi à étudier de mon côté ]
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 (xloadx)