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>
|
