Meniu Blog

Detalii vizitator

IP-ul tău public este 18.97.14.84, 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 pe blog

Recomand

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

București, România
Duminică, 18 Mai 2025, ora 22:28
ico
12.1°C
Ploaie torențială
Temperatură resimțită: 11.5°C
Viteza vântului: 11 km/h
Soarele răsare la ora: 02:44
Soarele apune la ora: 17:40

Info financiar

Curs valutar BNR
actualizat Vineri, 02 Mai 2025
 EUR: 4.9773 RON -0.0002
 USD: 4.3851 RON +0.0064
 GBP: 5.8378 RON -0.0140
 CHF: 5.3330 RON +0.0288
 XAU: 460.2343 RON -1.3996
Convertor valutar
Din:  În: 
Rezultat: 0

Facebook

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

Știri pe scurt

Recomand