JS - Janela que abre e fecha com efeito ALPHA
Olá pessoal, para quem quer fazer uma janelinha verde e chata igual essa do meu blog quando é acessado pela primeira vez, ae está o código:
Qualquer dúvida deixar RECADO / POST
– Script –
<script src=“_js/prototype.js”></script>
<script>
var objeto1 = “”;
var objeto2 = “”; var valor = “”;
var valor2 = “”;
var tipoAlpha = “”;
function ocultaJanelas() {
objeto1 = $(’aviso’).style;
objeto2 = $(’avisoSombra’).style;
valor = 90;
valor2 = 10;
tipoAlpha = 1;
mudaAlpha();
}
function mostraJanelaComAlpha() {
objeto1 = $(’aviso’).style;
objeto2 = $(’avisoSombra’).style;
objeto1.display = “block”;
objeto2.display = “block”;
valor = 0;
valor2 = 0;
tipoAlpha = 2;
mudaAlpha(); }
function mudaAlpha() {
objeto1.opacity = (valor / 100);
objeto1.filter = “alpha(opacity=” + valor + “)”; // IE/Win
objeto1.KhtmlOpacity = (valor / 100); // Safari 1.1 or lower, Konqueror
objeto1.MozOpacity = (valor / 100);
objeto2.opacity = (valor2 / 100);
objeto2.filter = “alpha(opacity=” + valor2 + “)”; // IE/Win
objeto2.KhtmlOpacity = (valor2 / 100); // Safari 1.1 or lower, Konqueror
objeto2.MozOpacity = (valor2 / 100);
//alert(valor);
if(tipoAlpha == 1) {
valor = valor - 10;
valor2 = valor2 - 10;
if(valor > 0) {
window.setTimeout(”mudaAlpha();”,50); }
else {
objeto1.display = “none”;
objeto2.display = “none”;
}
}
else if(tipoAlpha == 2){
valor = valor + 10;
valor2 = valor2 + 1;
if(valor < 100) {
window.setTimeout(”mudaAlpha();”,50);
}
}
}
</script> <style #avisoSombra { left:31%; background-color:#000; border:2px solid #000; z-index:99; } #aviso { position:absolute; background-color:#CCFF80; border:1px solid #d0d0d0; left:30%; z-index:100; }> #aviso, #avisoSombra { position:absolute; width:360px; height:230px; padding:10px; font:12px Verdana; display:none; } #aviso h1 { font:12px Verdana; font-weight:bold; padding:4px; background:#99BF60; color:#fff; border:2px solid #fff; }
</style>
<div id=“avisoSombra” style=“top:31%;”></div>
<div id=“aviso” style=“top:30%;”>
<h1>Olá Nobre Visitante</h1>
Se você está olhando esse modesto blog do Sr. Andrey… Sera interessante que deixasse um comentário! <br /><br /> Caso não atenda as minha rinvidicassão nois vai destrui teu computa-dor! <br /><br /> Att., <br /> <br />
Andrey
<br /><br />
<center>
<input type=“button” value=“Fechar Janelinha que enxe o s…” onclick=“ocultaJanelas();”>
</center>
</div>
– Fim Script –
Download:
September 3rd, 2007 at 6:29 pm
Salve salve André,
Gostei do exemplo, achei bem pratico de ser aplicado, agora estou estudando o potencial disso aí.
Forte abraço!!!
September 4th, 2007 at 4:16 am
Ae Edson!
Obrigado pelo POST…
Obs.: Meu nome é Andrey =D
haha
Abraço!
September 6th, 2007 at 10:13 am
Andrey copiei o codigo mas nao funcionou….ficou o texto na pagina direto.
September 6th, 2007 at 11:06 am
Henrique,
Adicionei o link para download no final do POST!
Att.,
Andrey Pedro Lefkum
Obs.: Bom final de Semana!
September 8th, 2007 at 6:02 am
O efeito é interessante, mas usando o scriptaculous é mais fácil não? (http://script.aculo.us/) É só chamar o script na página e digitar uma linha de código. Tem vários outros efeitos também, depois de uma olhada.
Até.
September 10th, 2007 at 4:53 am
Bacana… mas as vezes gosto de “reinventar” a roda mesmo =D
Obrigado por contribuir! Vou adicionar no meu repositório =)
Att.,
Andrey