Javascript Girl
  1. Javascript Girl
  3. Modification dynamique de l'image de fond CSS
Intereting Posts
Capture de sortie de WshShell.Exec en utilisant Windows Script Host La modification de la valeur de la page chrome Android a-t-elle été modifiée avec la dernière version de Chrome? Nœud hors mémoire Angular ng-change for select n'appelant pas la méthode déclarée Comment attraper une erreur "Maximum stack stack exceeded"? Accéder aux propriétés shadow DOM (polymère) avec javascript / jquery? Fonctions de rappel de JavaScript et Google Feed API Highcharts passe plusieurs valeurs à l'info-bulle Ember.js engage un modèle parent avec des modèles enfants déjà existants Masquer div si l'URL contient un mot JQuery Fadeout sur Click ou after delay Fonction "Désinscription" appel / rappel de la fonction "exécuteur" observable Comment configurer la taille par défaut de la fenêtre du navigateur dans Protractor / WebdriverJS JavaScript: filtre () pour les objets Comment déterminer si un événement de redimensionnement a été déclenché par un clavier doux dans un navigateur mobile?

Modification dynamique de l'image de fond CSS

J'ai déjà essayé plusieurs choses, mais jusqu'à présent, pas de chance.

Ce que je cherche, c'est une façon de faire mon étiquette d'en-tête HTML changer les images d'arrière-plan toutes les quelques secondes. Toutes les solutions sont les bienvenues, pourvu qu'il ne soit pas complexe.

J'ai maintenant ce code ainsi que la liaison avec JQuery:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 

 $(function() { var header = $('.mainHeader'); var backgrounds = new Array( 'url(img/rainbow.jpg)', 'url(img/chickens_on_grass.jpg)' 'url(img/cattle_on_pasture.jpg)' 'url(img/csa_bundle.jpg)' ); var current = 0; function nextBackground() { header.css('background',backgrounds[current = ++current % backgrounds.length]); setTimeout(nextBackground, 10000); } setTimeout(nextBackground, 10000); header.css('background', backgrounds[0]); });

Mon en-tête HTML:

<header class="mainHeader"></header>

Et CSS: 

 .mainHeader { background: no-repeat center bottom scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 150px; padding-top: 2%; font-size: 100%; }

À l'heure actuelle, j'ai maintenant une image de fond.

Dans l'attente de suggestions. 

 <html> <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function(){ var header = $('body'); var backgrounds = new Array( 'url(http://placekitten.com/100)' , 'url(http://placekitten.com/200)' , 'url(http://placekitten.com/300)' , 'url(http://placekitten.com/400)' ); var current = 0; function nextBackground() { current++; current = current % backgrounds.length; header.css('background-image', backgrounds[current]); } setInterval(nextBackground, 1000); header.css('background-image', backgrounds[0]); }); </script> </head> <body> <header></header> </body> </html>

Réalisé quelques modifications à votre code

DEMO: http://jsfiddle.net/p77KW/ 

 var header = $('body'); var backgrounds = new Array( 'url(http://placekitten.com/100)' , 'url(http://placekitten.com/200)' , 'url(http://placekitten.com/300)' , 'url(http://placekitten.com/400)' ); var current = 0; function nextBackground() { current++; current = current % backgrounds.length; header.css('background-image', backgrounds[current]); } setInterval(nextBackground, 1000); header.css('background-image', backgrounds[0]);

Les plus gros changements (comme indiqué dans d'autres commentaires), c'est que vous devez utiliser apostrophe ** '** s, pas les génériques ouvertes et fermées, et que votre tableau n'était pas correct.

Avec ces corrections hors de la façon dont j'ai simplifié quelques éléments:

  1. Augmentez le current puis prenez le module (je sais que c'est essentiellement ce que vous avez fait, mais combien il est plus facile de déboguer ;) )
  2. Cibler l' background-image directement
  3. Utilisé setInterval() au lieu d'un double appel pour setTimeout

Vous ne pouvez pas délimiter les chaînes JavaScript avec ' caractères. Vous devez utiliser " ou ' .

Vous pouvez acheminer cette même technique avec HTML / CSS uniquement en 1. placer des images dans une balise "img" dans votre code HTML entouré d'un "wrapper div" et le configurer sur la position: img de l'enveloppe relative et de la partition div pour la position: absolue. Pour une largeur totale / pleine hauteur, vous pouvez utiliser des pourcentages ou potentiellement "background-size: cover" (ne pas avoir vérifié), puis appeler une animation CSS pour modifier dynamiquement les images.

Ou 2. vous pouvez ajouter plusieurs images à un arrière-plan dans votre CSS séparées par des virgules, appliquer une taille de fond: couvrir et utiliser à nouveau les animations CSS pour modifier l'arrière-plan.

Voici un exemple et aussi la documentation d'animation Mozilla CSS3

Il doit être en retard mais peut aider à un autre. Pour ce but dans certaines situations, je préfère utiliser un plugin jquery nommé tcycle qui n'a que quelques lignes de code et prend en charge une simple transition de fondu, mais fonctionne bien même avec des images volumineuses.

La mise en place d'un diaporama avec tcycle est facile et même pourrait être effectuée avec un marquage déclaratif tel que 

 <div class="tcycle"> <img src="p1.jpg"> <img src="p2.jpg"> </div>

L'astuce pourrait être en utilisant css z-index: -1 pour le conteneur div et réglage largeur et hauteur à 100%

La page d'accueil pour télécharger et vérifier d'autres exemples est Malsup jQuery plugins