Apaga las luces de tu web

1 comentó



Sin duda con las librerias JQuery se pueden hacer efectos que quedan muy bien. En este caso, te voy a explicar como 'apagar' las luces de tu blog o web. Lo que quiero decir es que al hacer click en un enlace, se muestra un contenido y el resto de la pagina se oscurece. Para que veas un ejemplo, haz click en el boton de abajo:



Para añadirlo en nuestro blog o web, primero ponemos los scripts y el CSS antes de </body> o </head>

VER CODIGO


<script src="http://hostredeando.ucoz.es/SCRIPTS/jquery-1.3.2.min.js" type="text/javascript">
</script>
<script>
               $(document).ready(function(){
                    $("#the_lights").fadeTo(1,0);
                    $("#turnoff").click(function () {
                         $("#the_lights").css({'display' : 'block'});
                         $("#the_lights").fadeTo("slow",1);
                    });
                    $("#soft").click(function () {
                         document.getElementById("the_lights").style.display="block";
                         $("#the_lights").fadeTo("slow",0.8);
                    });
                    $("#turnon").click(function () {
                         document.getElementById("the_lights").style.display="block";
                         $("#the_lights").fadeTo("slow",0);
                    });
               });
         
</script>
<style>
                             #the_lights{
                  background-color:#000;
                  height:100%;
                  width:100%;
                  position:absolute;
                  top:0;
                  left:0;
                  display:none;
               }
               #standout{
                    padding:5px;
                    background-color:#E7F3FB;
                    position:relative;border-radius:20px;
                    z-index:1000;
                    color:#000000;
               }
         
</style>




Una vez hecho esto, cada vez que quieras mostrar los enlaces, añades este codigo:

<center><div id = "standout"><div id = "turnoff"><a href="javascript:void">apagar luz</a></div>

<div id = "soft"><a href="javascript:void">luz suave</a></div>

<div id = "turnon"><a href="javascript:void">encender luz</a></div></div>
<div id="the_lights"></div></center>