JavaScript - DHTML / Efeitos

Aprenda a criar um box flutuante com efeito de entrada

enviado por Carlos Alberto

Com este código é possível criar um box flutuante (DIV) com efeito de entrada. Neste box é possível adicionar qualquer tipo de conteúdo.

Excelente para inserir peças publicitárias, avisos ao visitantes ou qualquer informação.

Testado no Internet Explorer e também no Firefox.

<HTML>
<HEAD>
  <TITLE></TITLE>
  <STYLE>
   A.link:link {color: black; text-decoration: none}
   A.link:visited {color: black; text-decoration: none}
   A.link:active {color: black; text-decoration: none}
   A.link:hover {color: black; text-decoration : none;}
  </STYLE>
  <script language="JavaScript1.2">
   var ie=document.all
   var dom=document.getElementById
   var ns4=document.layers

   var bouncelimit=32 //(must be divisible by 8)
   var direction="up"

   function initbox(){
    if (!dom&&!ie&&!ns4)
    return
    crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
    scroll_top=(ie)? document.body.scrollTop : window.pageYOffset
    crossobj.top=scroll_top-250
    crossobj.visibility=(dom||ie)? "visible" : "show"
    dropstart=setInterval("dropin()",50)
   }
   function dropin(){
    scroll_top=(ie)? document.body.scrollTop : window.pageYOffset
    if (parseInt(crossobj.top)<100+scroll_top)
    crossobj.top=parseInt(crossobj.top)+40
    else{
     clearInterval(dropstart)
     bouncestart=setInterval("bouncein()",50)
    }
   }
   function bouncein(){
    crossobj.top=parseInt(crossobj.top)-bouncelimit
    if (bouncelimit<0)
    bouncelimit+=8
    bouncelimit=bouncelimit*-1
    if (bouncelimit==0){
     clearInterval(bouncestart)
    }
   }
   function dismissbox(){
    if (window.bouncestart) clearInterval(bouncestart)
    crossobj.visibility="hidden"
   }
   function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = ""
    if (document.cookie.length > 0) {
     offset = document.cookie.indexOf(search)
     if (offset != -1) {
      offset += search.length
      end = document.cookie.indexOf(";", offset)
      if (end == -1)
      end = document.cookie.length;
      returnvalue=unescape(document.cookie.substring(offset, end))
     }
    }
    return returnvalue;
   }
   function dropornot(){
    if (get_cookie("droppedin")==""){
     window.onload=initbox
     document.cookie="droppedin=yes"
    }
   }
   dropornot()
   function redo(){
    bouncelimit=32
    direction="up"
    initbox()
   }
   window.onload=initbox
  </script>
</HEAD>
<BODY>
  <div id="dropin" style="position:absolute;visibility:hidden;left:50;top:0;width:500;height:150;background-color:#F5F5F5">
   <TABLE WIDTH="100%" HEIGHT="100%" BORDER="1" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR="#000000">
    <TR>
     <TD valign="top"><div align="right"><a class="link" href="javascript:dismissbox()"><FONT FACE="Verdana" SIZE="-2"><B>X</B></FONT></a> </div>
     <FONT FACE="Verdana" SIZE="-1" COLOR="DODGERBLUE"><B> script BigBoy</B></FONT><BR><FONT FACE="Verdana" ="-2"><B>BigBoy desing</B></FONSIZET>
     <BR><BR><FONT FACE="Verdana" SIZE="-2"> Nesta janela, você tem a possibilidade de adicionar os que quiser, imagens, texto, outros DIVs, Texto em RTF (Rich Text Format), além de todas as tags HTML possíveis!</FONT></TD>    </TR>
   </TABLE>
  </div>
  <A href="javascript:redo()">Cair janela novamente</A>
  </BODY>
</HTML>

Versão impressa gerada em: quarta-feira, 25 de novembro de 2009