1º. Crie um arquivo index.html e insera o código abaixo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Efeito Apagar a Luz - JQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#opacidade').css('height', $(document).height()).hide(); $('button').click(function() { $('#opacidade').toggle(); if ($('#opacidade').is(':hidden')) { $('button').html('Apagar a luz'); } else { $('button').html('Acender a luz'); } }); }); </script> <link href="estilo.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <p align="center">Exemplo de como fazer um efeito de apagar a luz, usando JQuery</p> <div id="filme" align="center"><img src="youtube.jpg" /></div> <p align="center"><button id="botao">Apagar a luz</button></p> <div id="opacidade"></div> </body> </html> |
linha 5: chamada da biblioteca jquery
linha 8: $(‘#opacidade’).css(‘height’, $(document).height()).hide(); – esta linha de comando permite obter a altura total da janela do navegador e torná-la em oculto (hide).
linha 9: quando clicar no botão é chamado a função que fará a alternância do efeito (on/off).
linha 10: .toogle() permite a alternância; o elemento que estava invisível passa a ser visível.
linha 12: condição if que verifica se é para apagar ou acender as luzes.
linha 25: foi colocado uma imagem para representar um vídeo, porém você deve substituir pelo código de chamada do vídeo. ex: no youtube copie o código da caixa de texto incorporar e cole dentro das tags div.
linha 28: este div é utilizado para dar o efeito desejado; a grande sacada está na definição das regras css.
2º. Crie um arquivo de nome estilo.css que conterá a formatação de estilos.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | body{ background-color:#ffffff; font-family:Arial, Helvetica, sans-serif} #botao{ background-color:#666666; color:#FFFFFF; cursor:pointer; width:250px; position:relative; display:block; z-index:999 } #filme{ width:250px; height:250px; margin:0 auto; border:#000000 2px solid; padding:0; position:relative; display:block; z-index:999 } #opacidade { position:fixed; top:0; right:0; bottom:0; left:0; margin:0; padding:0; background:#000; opacity:.80; filter: alpha(opacity=80); -moz-opacity: 0.80; z-index: 1; } |
Até a próxima!
7 comentários:
que bosta de tutorial, da próxima vez toma um pouco mais de tempo e faça uma coisa decente seu filho de uma puta burro e analfabeto.
Bom amigo, quem não entendeu o tutorial foi você então o burro da história não sou eu. E não fale palavrões no blog!
Otimoo
Aff seu FDP naum sabe fazer Tutorial então não posta.
Se não entendeu então não coloque a culpa em mim
Como que vai da certo sem a função jQuery? Explica direito!
tutorial mais merda que ja vi
Postar um comentário