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

Soyez le premier à donner votre avis sur cette source.

Vue 18 961 fois - Téléchargée 932 fois

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é ]

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

cs_petifa
Messages postés
215
Date d'inscription
dimanche 20 février 2005
Statut
Membre
Dernière intervention
10 mars 2014
-
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.
@karamel
Messages postés
1710
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
21 août 2019
42 -
jour
dans la fonction arret tu met clearInterval au lieux de clearTimeout

mis a par ca l'effet est sympa
dvjh
Messages postés
6
Date d'inscription
vendredi 26 octobre 2007
Statut
Membre
Dernière intervention
14 décembre 2008
-
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>




© COPYRIGHT - DEBBOG






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



</html>
xloadx
Messages postés
28
Date d'inscription
samedi 15 mai 2004
Statut
Membre
Dernière intervention
10 septembre 2011
-
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
kangourouxxx
Messages postés
71
Date d'inscription
jeudi 31 janvier 2008
Statut
Membre
Dernière intervention
6 mars 2015
-
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.

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.