begin process at 2012 05 28 10:12:08
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > FOND D'ÉCRAN DÉFILANT AVEC FONCTION MARCHE/ARRÊT ( AJOUT JQUERY )

FOND D'ÉCRAN DÉFILANT AVEC FONCTION MARCHE/ARRÊT ( AJOUT JQUERY )


 Information sur la source

Note :
7 / 10 - par 1 personne
7,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :background, défilant, marche, arrêt Niveau :Initié Date de création :12/12/2008 Date de mise à jour :22/09/2009 00:32:41 Vu / téléchargé :15 035 / 720
Auteur : xloadx

Ecrire un message privé
Site perso
Commentaire sur cette source (5)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Un petit bout de code qui pourrait être
utile à tous dans diverses applications
au sein d'un site internet....

Source

  • <?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>
  • &copy; 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>
  • ';
  • ?>
<?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>
&copy; 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é ]

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

12 décembre 2008 10:07:00 :
Mise à jour
16 décembre 2008 18:43:33 :
Pour la mise à jour j'ai intégré les feuilles de style communs pour faire plaisir à certains ^^....
16 décembre 2008 18:45:17 :
Pour la mise à jour, j'ai modifié le clearInterval en clearTimeout et j'ai intégré les feuilles de style communs pour faire plaisir à certains ^^....
22 septembre 2009 00:32:41 :
J'ai rafraîchi quelques parties du code et pris en compte vos suggestions... N'hésitez pas à m'indiquer ce qui pourrait bugguer...;)

 Sources du même auteur

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN...
AJOUT NOEUDS + OBJETS + LIENS (AJOUTUBE V1.1)
Source avec Zip Source avec une capture INFO BULLE MULTI -TEXTE OU FAUSSE FENÊTRE POPUP (SIMPLE ET P...
Source avec Zip Source avec une capture TEXTE DÉFILANT ( BOUTONS : ARRÊT - PAUSE - AVANT - ARRIÈRE E...
Toutes les sources de xloadx

 Sources de la même categorie

Source avec Zip JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator
Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Toutes les sources de la catégorie Graphique

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture EFFET DE SURBRILLANCE EN JAVASCRIPT par zulrigh
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
Source avec Zip Source avec une capture RAINBOW CURSOR par wackybacky
Source avec Zip Source avec une capture MARQUEE EN JAVASCRIPT par Kimjoa
Source avec Zip Source avec une capture CURSEUR QUI POINTE LA SOURIS par wackybacky

Commentaires et avis

Commentaire de petifa le 12/12/2008 12:23:22

slt
meme si le titre parle de lui même, tu devrais dire a quoi sert ta source, et quelles sont ses spécificités.

Commentaire de kazma le 12/12/2008 18:03:10 administrateur CS

jour
dans la fonction arret tu met clearInterval au lieux de clearTimeout

mis a par ca l'effet est sympa

Commentaire de dvjh le 14/12/2008 21:54:36

Débutant. Je propose les modifications ci-dessous. J'ai retravailler le code et utilisé jQuery seulement parce que je suis en train de l'étudier.

<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-color:#FFFFFF;
border:solid #000000 1px;
padding:12px;
width:200px;
margin-bottom:24px;
}
#divPrésentation {
clear:left;
float:right;
background-color:#FFFFFF;
border:solid #000000 1px;
padding:12px;
width:300px;
}
</style>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script type="text/javascript">
var largeur = 0;
var hauteur = 0;
var largeurMaximum = screen.width;
var hauteurMaximum = screen.height;
var défilement;

function défiler()
{
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(){
défilement = setInterval("défiler()",5);
});
$(document).mouseout(function(){
clearInterval(défilement);
});
});
</script>
</head>
<body>
  <div id="divCopyright">
   <p>
&copy; COPYRIGHT - <a href="http://debbog.free.fr">DEBBOG</a>
</p>
  </div>
  <div id="divPrésentation">
   <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>

Commentaire de xloadx le 16/12/2008 18:21:23

Ok mais outre le fait que le script externe doit être téléchargé via Google et que les divs soient décalés maintenant.

De plus, ce n'est plus tout le fond d'écran qui défile mais une partie seulement quand ça ne fonctionne que sous IE et Opera.

Pour  SAFARI, GOOGLE CHROME  et FIREFOX on oublie direct la portabilité, rien ne se passe, mais j'ai vu le résultat sur IE, très fluide...espérons que la portabilité soit améliorée.

Je ne suis pas contre les améliorations mais elles doivent être justifiées et vérifiées
dans les moindres détails à mon avis...J'espère que le script sera amélioré par la suite...

Bien amicalement XLOADX

Commentaire de kangourouxxx le 02/01/2009 10:27:31 7/10

Ton script est pas mal du tout seul défaut on peut peut pas charger de grosse images ou des images différentes, cela donne un effet sacadé.

Mais j'aime bien ton topic il est sympas Bravo et bonne continuation dans le scripting.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

image background défilant [ par buzz03 ] Bonjour &#224; tous, j'ai ins&#233;r&#233; un script de background d&#233;filant (cf ci dessous) ; sur mes 2 pc (XP, IE6 tous les 2) l'image backgroun Background-image marche pas avec Internet Explorer [ par amer_ezahir ] Salut ; j'ai un problème d'affichage d'une "background-image" au niveau de Internet Explorer , sur Fire fox ça marche trés bien ! j'ai recherché sur Texte défilant avec arrêt souris [ par Jonef ] Salut à tousJ'ai un petit prob car j'aimerais créer un page internet où il y aurait un script java qui ferait défiler un texte horizontalement et qui flash dans email? ou popup dans email? [ par steackhe ] bonjour et merci si qq1 peut me sauver ou meme m'achever.je veux envoyer 1 ecard flash qui s'ouvrirait directement dans le logiciel de messagerie.j' a verification de plusieurs textbox a la fois [ par bonjovi51 ] Bonjour a tousj'ai 6 textbox dans lesquelles il faut entrer des valeurs numériquesJe voudrai les faire vérifier par une fonction js. Mais mon code ne Mais pk ça marche pas ?? [ par dinous ] Bonjour ;)&lt;script type='text/javascript'&gt;function test(plop){alert(plop);}&lt;/script&gt;&lt;select name="select1" onclick='test('plop');'&gt;&l Pourquoi mon pre-chargement d'images ne marche pas toujours ? [ par sunelis ] Salut a tous J'ai des boutons a base d'images survolees.Le probleme c'est que les images secondaires (qd la souris est au dessu des boutons) sont rech Balise HTML dans un if, ÇA MARCHE PAS !!! [ par spec10 ] salut, Je suis en train de m'arracher les cheveux avec ce maudit problème.Je veux faire fonctionner ma page web en fonction de la résolution du client capture.events ... ca marche comments??? [ par TCHATTE ] salut tou le monde !bon voila mon probleme : je veu tester les evenements (oui chui (un peu) un noob ...) et je voudrai savoir pourquoi ce script ne m onChange="submit()" ne marche PLUS avec firefox [ par fabrice_pi ] Bonjour,Je ne sais pas si cette question à avoir avec le javascript ou si c'est plus en rapport avec la compatibilité des browsers, à vous de me le di


Nos sponsors


Sondage...

Comparez les prix


Samsung Galaxy S
Entre 529€ et 529€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,513 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)