CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 08 01 01:23:39

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

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,00 / 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é :12 025 / 577

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>
© 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 !

index.php 2 044 octets
jquery-1.3.1.js 117 446 octets

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)

INFO BULLE MULTI -TEXTE OU FAUSSE FENÊTRE POPUP (SIMPLE ET P...

TEXTE DÉFILANT ( BOUTONS : ARRÊT - PAUSE - AVANT - ARRIÈRE E...

Toutes les sources de xloadx

Sources de la même categorie

LIBRAIRIE DE GESTION DES COULEURS POUR CSS : COLORPARSER par ryosama

PLUGIN JQUERY : PROGRESS BAR par ryosama

DESSINER DES POLYGONES AVEC LA SOURIS par sebcap26

FAIRE DEFILER DES IMAGE A LA MOLETTE OU SOURIS par kazma

STOCK/FOREX CANDLE CHART USING CANVAS API par BlackWizzard

Toutes les sources de la catégorie Graphique

Sources en rapport avec celle ci

EFFET DE SURBRILLANCE EN JAVASCRIPT par zulrigh

PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony

RAINBOW CURSOR par wackybacky

MARQUEE EN JAVASCRIPT par Kimjoa

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

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>
© 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 à tous, j'ai inséré un script de background dé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 ;)<script type='text/javascript'>function test(plop){alert(plop);}</script><select name="select1" onclick='test('plop');'>&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

Derniers Blogs

WP7 5K BELGIUM CHALLENGE par junarnoalg

LES MONADES POUR LES NULS par mdufourneaudravel

[WP7] AJOUTER DES IMAGES DANS LA MEDIA LIBRARY D'UN WINDOWS PHONE 7 par Audrey

VIVE LES MOCKS ET LES POCOS par vLabz

[WF4] WORKFLOW AND CUSTOM ACTIVITIES - BEST PRACTICES (4/5) par JeremyJeanson

Forum

RE : PROBLEME ENCHAINEMENT DE FONCTION par loicseg

PROBLEME ENCHAINEMENT DE FONCTION par loicseg

RE : MODéLISATION FILE D'ATTENTE DE COMMANDE AVEC HTML/AJAX/MYSQL par PetoleTeam

RE : CHANGER LA VALEUR D'UNE VARIABLE PAR UNE FONCTION par PetoleTeam

RE : SUBMIT AVEC UNE IMAGE EN AJAX : ENVOI DE FORMULAIRE par romi36

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Logiciels

Crystal Report (11)
CRYSTAL REPORT (11)

Crystal Reports est un outil de reporting souple et puissant, vous pouvez très facilement consult...

Cliquez pour télécharger Crystal Report
Academy System (12.0.2.0)
ACADEMY SYSTEM (12.0.2.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Xilisoft iPod Vidéo Convertisseur 6 (6.0.3.0419)
XILISOFT IPOD VIDéO CONVERTISSEUR 6 (6.0.3.0419)

Xilisoft iPod Vidéo Convertisseur est un outil puissant de conversion d'iPod, facile à utiliser. ...

Cliquez pour télécharger Xilisoft iPod Vidéo Convertisseur 6
Xilisoft iPhone Vidéo Convertisseur 6 (6.0.3.0419)
XILISOFT IPHONE VIDéO CONVERTISSEUR 6 (6.0.3.0419)

Xilisoft iPhone Vidéo Convertisseur est le meilleur logiciel de conversion iPhone qui peut facile...

Cliquez pour télécharger Xilisoft iPhone Vidéo Convertisseur 6
Xilisoft iPad Vidéo Convertisseur 6 (6.0.3.0419)
XILISOFT IPAD VIDéO CONVERTISSEUR 6 (6.0.3.0419)

Il s'agit d'un logiciel polyvalent pour convertir les formats vidéo/audio populaires en formats p...

Cliquez pour télécharger Xilisoft iPad Vidéo Convertisseur 6