Meniu Blog

Detalii vizitator

IP-ul tău public este 54.145.124.143, folosești sistemul de operare necunoscut, o rezoluție de pixeli și browser necunoscut !
Dacă am dreptate dă-mi un like pe Facebook!

Caută cod poștal

Județul:
Localitatea:
Strada:
CoduriPostale.ro

Articole noi pe blog

Calendar ortodox

Vineri, 24 Noi 2017
Sf. Sfintit Mc. Clement, Ep. Romei si Petru, Ep. Alexandriei

Recomand

Știri pe scurt

Script stinge lumina pe site (turn off lights)

Script stinge lumina pe site (turn off lights)

Probabil că ați văzut pe multe site-uri un buton sau un link care, dacă este apăsat, stinge lumina în toată pagina exceptând o porțiune, de obicei un filmuleț sau o imagine. Să ne imaginăm următorul scenariu: vizionăm un film sau un videoclip pe un site iar pe pagina respectivă sunt tot felul de elemente care ne distrag atenția gen reclame, imagini, sau texte care clipesc sau se plimbă pe ecran. Nu ar fi mai plăcut dacă am putea, printr-un singur click, să facem să dispară toate aceste elemente enervante și să rămână în prim plan doar clipul video?

Pornim de la o pagină simplă în html în care avem un clip video inserat:

<div class="container">
  <h1>Pagina demo - oprire/pornire lumina site</h1>
  <br />
  <br />
  <div>
    <a class="lightswitch" title="apasa">» stinge lumina «</a>
  </div>
  <br />
  <br />
  <div class="movie">
    <iframe width="420" height="315" src="//www.youtube.com/embed/Tf2BU4e0fkc" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="text">
    <p>Mauris et porttitor tortor. Donec tristique felis id pharetra condimentum. Praesent molestie a leo ut pretium. Ut vulputate justo eu aliquet tempor. Etiam eu sapien ac purus fermentum venenatis id in orci.</p>
    <p>Vivamus mollis leo sit amet leo sagittis aliquet. Integer rhoncus egestas lorem, eu consequat tortor luctus et. Curabitur at vulputate mi. Etiam sed mauris sit amet tortor dictum pulvinar. Donec scelerisque diam sem, eget molestie ipsum condimentum id. Pellentesque dapibus est mauris, rhoncus faucibus eros fermentum nec.</p>
    <p>Aenean nec sodales lectus, vitae laoreet quam. Vestibulum nec dictum turpis, facilisis aliquet odio. Integer rhoncus lectus neque, sit amet eleifend odio tempus nec.</p>
  </div>
  <h4>Integer rhoncus egestas lorem, eu consequat tortor luctus et. Curabitur at vulputate mi. Etiam sed mauris sit amet tortor dictum pulvinar.</h4>
</div>
<div id="dark"></div>

Stilizăm pagina cu ajutorul CSS:

<style>
  .container{
    width:1000px;
    margin:0px auto;
  }

  .movie{
    float:left;
    position:relative;
    z-index:1000;
  }

  .text{
    float:right;
    width:450px;
    border:solid 1px #cccccc;
    padding:20px;
    background-color:#ffffcc;
  }

  h1{
    color:#dd0000;
  }

  h4{
    clear:both;
    padding-top:30px;
  }

  .lightswitch{
    text-decoration:none;
    font-weight:bold;
    color:#0000ff;
    z-index:1000;
    cursor: pointer;
    position:absolute;
  }

  .lightswitch:hover{
    text-decoration:underline;
  }

  #dark{
    background-color:#000000;
    opacity:0.90;
    width:100%;
    height:100%;
    z-index:100;
    position:absolute;
    left:0;
    top:0;
    display:none;
  }

  .lightswitchoff{
    color:#ffff00;
  }
</style>

Totul e bine până acum, avem o pagină cu un filmuleț, puțin stilizată cu CSS, dar butonul nostru încă nu funcționează. Pentru a-l face funcțional mai avem nevoie doar de un mic script în jQuery. Întâi avem două funcții, de aprins și respectiv stins lumina, iar apoi avem funcția care la apăsarea butonului, apelează cele două funcții anterioare:

<script type="text/javascript">
  function turnlightson(){
    $( '#dark' ).fadeOut(200,function() { $( "#dark" ).remove(); });
  };

  function turnlightsoff(){
    $( 'body' ).append( '<div id="dark"></div>' );
    $( '#dark' ).fadeIn(400);
  };
</script>

<script type="text/javascript">
  $(document).ready(function(){
    var i=0;
    $( '.lightswitch' ).click(function(on){
      if(i==1){
        turnlightson();
        $(this).html( "» stinge lumina «" ).removeClass( "lightswitchoff" );
        i=0;
      }
      else{
        turnlightsoff();
        $(this).html( "» aprinde lumina «" ).addClass( "lightswitchoff" );
        i=1;
      }
      on.preventDefault();
    });
  });
</script>

Aici puteți vedea pagina creeată în acest tutorial.

Sper că vă este de folos. Succes!

Postat de spooker Marți, 19 Noiembrie 2013 la ora 15:14 în categoria IT & C


Ai ceva de spus?

*

*

*
caractere rămase din disponibile.

Când postezi un comentariu încearcă să ții cont de aceste reguli!

      

Vremea acum

Bucharest, România
Vineri, 24 Noi 2017, ora 20:04
conditii meteo
4.9°C
Cer acoperit
Temperatură resimțită: 5°C
Viteza vântului: 3 km/h
Soarele răsare la ora: 7:23
Soarele apune la ora: 16:40

Info financiar

Curs valutar BNR
actualizat Vineri, 24 Noi 2017
 EUR: 4.6536 RON -0.0010
 USD: 3.9215 RON -0.0091
 GBP: 5.2229 RON -0.0058
 CHF: 3.9971 RON -0.0112
 XAU: 162.5645 RON -0.7091
Convertor valutar
Din:  În: 
Rezultat: 0

Facebook, Google Plus



Abonare la noutăți

Abonează-te prin email pentru a fi la curent cu ultimele articole din blog, cele mai noi fotografii sau alte noutăți de pe site. Vei primi un email pentru a confirma abonarea.

Logare

Horoscop zilnic

Recomand