Sfondo che cambia a seconda dell'orario

Tutorial Sfondo che cambia a seconda dell'orario

Messaggio Da Insane Gio 9 Gen 2014 - 13:38

Sfondo che cambia a seconda dell'ora


Salve con questo tutorial lo sfondo si cambierà a seconda dell'orario ecco un esempio:
Sfondo che cambia a seconda dell'orario Tutori10

Ovviamente potrete cambiare le immagini a vostro piacimento. 
Iniziamo con il tutorial andate in:

PDA Sfondo che cambia a seconda dell'orario Arrow Moduli Sfondo che cambia a seconda dell'orario Arrow Gestione dei codici Javascript Sfondo che cambia a seconda dell'orario Arrow Creare un nuovo script Sfondo che cambia a seconda dell'orario Arrow Tutte le pagine
Codice:
    
$(function () {

   //ZONA EDITABLE------------------------------------------------------------

      var selector_css = "body";
      var imagen_se_repite = true;
      var imagen_fija = false;

      var horario_inicio = new Array();
      horario_inicio["mañana"] = 5;
      horario_inicio["tarde"] = 12;
      horario_inicio["noche"] = 21;

      var imagenes = new Array();
      imagenes["mañana"] = "http://i35.servimg.com/u/f35/17/45/19/77/manana11.jpg";
      imagenes["tarde"] = "http://i35.servimg.com/u/f35/17/45/19/77/tarde11.jpg";
      imagenes["noche"] = "http://i35.servimg.com/u/f35/17/45/19/77/noche11.jpg";
   
   //FIN ZONA EDITABLE----------------------------------------------------------


   var horaActual = (new Date()).getHours();
   var imagen = "";
   if (horaActual >= horario_inicio["mañana"] && horaActual < horario_inicio["tarde"]) {
      imagen = imagenes["mañana"];
   } else if (horaActual >= horario_inicio["tarde"] && horaActual < horario_inicio["noche"]) {
      imagen = imagenes["tarde"];
   } else if (horaActual >= horario_inicio["noche"] || horaActual < horario_inicio["mañana"]) {
      imagen = imagenes["noche"];
   }

   str_css_fixed = "scroll";
   if (imagen_fija) str_css_fixed = "fixed";

   if (imagen_se_repite) {
      $(selector_css).css("background", "url(" + imagen + ") " + str_css_fixed + " repeat");
   } else {
      $(selector_css).css({
         "background-image": "url(" + imagen + ")",
         "background-repeat": "no-repeat",
         "background-size": "cover",
         "background-attachment": str_css_fixed
      });
   }
});

Ora andiamo a modificare il codice:

-selector_css dove applicare l'immagine di sfondo. L'impostazione predefinita è il body

-imagen_se_repite possibili valori veri o falsi . Vero se l'immagine è piccola e si ripete nel assi X e Y False se l'immagine è grande e si vuole riempire l'intera linea, partendo dall'alto.

-horario_inicio["mañana"] Indicare l'ora per il mattino (formato 0-24)
-horario_inicio["tarde"] Indicare l'ora d'inizio per il pomeriggio (formato 0-24)
-horario_inicio["noche"] Indicare l'ora d'inizio per la notte (formato 0-24)

-imagenes["mañana"] URL dell'immagine di sfondo per la mattina
-imagenes["tarde"] URL dell'immagine di sfondo per il pomeriggio
-imagenes["noche"] URL dell'immagine di sfondo per la notte

Ora cliccate salvare ed il gioco è fatto :good:

Tutorial creato da: Turbodeif Tradotto da Insane 
Copyrigth ©️ FORUMATTIVO.COM


Insane
Insane
Veterano dello staff
Veterano dello staff

Sesso : Maschio
Età : 32
Messaggi : 4178
Località : Varese

https://aiuto.forumattivo.it/
Insane è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.