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:

Janelinha com Alpha

6 Responses to “JS - Janela que abre e fecha com efeito ALPHA”

  1. Edson Says:

    Salve salve André,
    Gostei do exemplo, achei bem pratico de ser aplicado, agora estou estudando o potencial disso aí.
    Forte abraço!!!

  2. Andrey Pedro Lefkum Says:

    Ae Edson!

    Obrigado pelo POST…

    Obs.: Meu nome é Andrey =D

    haha
    Abraço!

  3. HenriqueSholl Says:

    Andrey copiei o codigo mas nao funcionou….ficou o texto na pagina direto.

  4. Andrey Pedro Lefkum Says:

    Henrique,

    Adicionei o link para download no final do POST!

    Att.,
    Andrey Pedro Lefkum

    Obs.: Bom final de Semana!

  5. Keyne Says:

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

  6. Andrey Pedro Lefkum Says:

    Bacana… mas as vezes gosto de “reinventar” a roda mesmo =D

    Obrigado por contribuir! Vou adicionar no meu repositório =)

    Att.,
    Andrey

Leave a Reply


This is a free Wordpress template provided by Mathew Browne | Web Design | SEO