Sfondo che cambia a seconda dell'orario


Tutorial Sfondo che cambia a seconda dell'orario

Messaggio Da Insane il 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:


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

PDA  Moduli  Gestione dei codici Javascript  Creare un nuovo script  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


avatar
Insane
Aiutattivo
Aiutattivo

Sesso : Maschile
Etā : 25
Messaggi : 3935
Localitā : Varese


Vedere il profilo dell'utente http://aiuto.forumattivo.it/
Insane č stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

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