Auringonvalo bannerin koodi

Valikko

Auringonvalo
Banneri

Voit luoda tällä sivulla koodin bannerille

Bannerin asetukset

px - 'button' halkaisija (Min 20)

Lat: Lon: Ota käyttöön

Anna aikavyöhyke

Kehys:
α 0.6
Body:
font:

Sijainti:

Siirtymävaikutus PÄÄLLÄ

Tässä on esimerkki pienen "painike"-ympyräkaavion ja "bannerin" ponnahdusikkunan yhdistelmästä - Siirry RATAS-symboliin oikeassa yläkulmassa pelataksesi sen kanssa!

Bannerissa on päivän auringonvaloaika. Asettamalla hiiren sen päälle, esiin tulee isompi "banneri", jossa oleva värikartta kertoo mitä värit tarkoittavat.

Eikö olisi mukavaa, jos kaikki olisi jo hoidettu puolestasi!

Auringon valo

Se on vähän "rajua", ellet ole valinnut "Siirtymätehoste - PÄÄLLÄ" -vaihtoehtoa, joka häivyttää "ponnahdusikkunan" sisään ja ulos.

Kuitenkin; tämä vaatii jquery-kirjaston lataamisen, koska meidän on varmistettava, että vaikka ponnahdusikkuna on tehty "näkymättömäksi", se voi silti peittää aktiiviset linkit/elementit sivullasi.

Molemmat kuvat ovat muokattavissa syöttämällä muuttujia asetuksissa, näin tämä DEMO-sivu tekee kaiken päivityksen.

Räätälöidyissä "painike"- ja "banneri"-skripteissäsi on kuitenkin sisäänrakennetut vaihtoehdot, jotka alla harmaassa paneelissa näyttvät koodin ja .ttf-fontin, jonka voit halutessasi ladata zip-tiedostona.

Sun_banner.php:ssä on joukko (tai kaksi) käyttäjille tekstin sanamuodon muuttamiseksi.

B.T.W. - Tällä esittelysivustolla vain valikkokohdissa * on hyödyllistä sisältöä !!! ...

 <meta http-equiv="x-ua-compatible" content="IE=edge" />

 <script src="js/jquery-latest.min.js" type="text/javascript"></script>
 
 <script>
 // Shorthand for $( document ).ready()
 $(function() {
    $("#beteljuice_stuff").hover(function () { // especially for transitions
    $("#sun_pop").show();
    $("#sun_pop").removeClass('off');
    el = document.querySelector(".sun_pop_out");
    el.className = "sun_pop_in";

    }, function () {
        if(el = document.querySelector(".sun_pop_in")) {
            el.className = "sun_pop_out";
        } else {
           $("#sun_pop").hide();
        }
        $("#sun_pop").on("transitionend",
            function(e){
                $("#sun_pop").addClass('off');
                $(this).off(e);
        });
    });
    // END hover stuff
 });
 </script> 
 <style type="text/css">
 #beteljuice_stuff {
   width: 75px;
   height: 75px;
 }
  #beteljuice_stuff:hover #sun_pop {
   display: block; 
 }
 .sun_pop { 
   height: 220px;
   width: 420px;
   position: relative;
   top: -151px;
   left: -420px;
   z-index: 2000; 
   background-color: rgba(240, 172, 84, .6);
   padding: 10px;
   border-radius: 15px;
   display: none;
 } .sun_pop_in { 
   height: 220px;
   width: 420px;
   position: relative;
   top: -151px;
   left: -420px;
   z-index: 2000; 
   background-color: rgba(240, 172, 84, .6);
   padding: 10px;
   border-radius: 15px;
   display: block;
   opacity: 1;
   transition-property: opacity;
   transition-duration:1s;
   transition-timing-function: ease-out;
 }
 
 .sun_pop_out { 
   height: 220px;
   width: 420px;
   position: relative;
   top: -151px;
   left: -420px;
   background-color: rgba(240, 172, 84, .6);
   padding: 10px;
   border-radius: 15px;
   display: block;
   opacity: 0;
   transition-property:opacity;
   transition-duration:1.5s;
   transition-timing-function: ease-in;
 }
 
 .off {
   z-index: -2000;
 } </style>

   

   <div id = "beteljuice_stuff">
      <img src = "sun_button.php" id = 'sun'>
      <div id = "sun_pop" class = "">
        <img src = "sun_banner.php" id = 'popup'>
      </div>
   </div> <!-- end beteljuice_stuff -->

   

 <script>   // optional image updater
  $(document).ready(function(){
    update(); // immediate put all images in the same place / time
    setInterval(update, 60*1000);
  });


   function update(){
     var popnow = Date.now();
     $("#popup").attr('src', 'sun_banner.php?'+popnow);
     $("#sun").attr('src', 'sun_button.php?'+popnow);
   }

 </script>

Another beteljuice plaything

Valikko