Meniu Blog

Detalii vizitator

IP-ul tău public este 35.172.224.102, 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
Marți, 06 Dec 2022, ora 12:12
ico
5.6°C
Burniță de intensitate joasă
Temperatură resimțită: 4.1°C
Viteza vântului: 7 km/h
Soarele răsare la ora: 07:36
Soarele apune la ora: 16:36

Info financiar

Curs valutar BNR
actualizat Luni, 05 Dec 2022
 EUR: 4.9207 RON -0.0090
 USD: 4.6726 RON -0.0125
 GBP: 5.7178 RON -0.0241
 CHF: 4.9903 RON -0.0239
 XAU: 269.7555 RON -1.4118
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