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

4/5 (5 avis)

Vue 20 284 fois - Téléchargée 984 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
kangourouxxx Messages postés 71 Date d'inscription jeudi 31 janvier 2008 Statut Membre Dernière intervention 6 mars 2015
2 janv. 2009 à 10:27
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.
xloadx Messages postés 28 Date d'inscription samedi 15 mai 2004 Statut Membre Dernière intervention 10 septembre 2011
16 déc. 2008 à 18:21
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
dvjh Messages postés 6 Date d'inscription vendredi 26 octobre 2007 Statut Membre Dernière intervention 14 décembre 2008
14 déc. 2008 à 21:54
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>
@karamel Messages postés 1815 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 25 novembre 2022 145
12 déc. 2008 à 18:03
jour
dans la fonction arret tu met clearInterval au lieux de clearTimeout

mis a par ca l'effet est sympa
cs_petifa Messages postés 215 Date d'inscription dimanche 20 février 2005 Statut Membre Dernière intervention 10 mars 2014
12 déc. 2008 à 12:23
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.

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.