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

Ce site au démarrage

begin process at 2012 02 13 02:14:27

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é :14 678 / 709

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

EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma

PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma

CALCULATRICE HEURE par m22001111

DRAG & DROP VERS UN CANVAS par kazma

ROTATION D'UNE IMAGE, ANIMATION par william voirol

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 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>
© 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] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz

SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc

[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

Forum

GOOGLE MAP PB ZINDEX MARKER par philou8

RE : AIDE SUR UN SCRIPT?? par NHenry

AIDE SUR UN SCRIPT?? par xavpac

[CPAINT ERROR] INVALID HTTP RESPONSE CODE '0 ' par warsez

[DEMANDE] ALGORITHME DJIKSTRA MéTRO/RER PARISIEN par dindin22

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

Logiciels

Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

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

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning