Código Fonte - O melhor conteúdo para programadores

Este código tem nota

Autor

Carlos Alberto

membro deste abril de 2007

Compartilhe e guarde

Enquete

Com qual Framework JavaScript você trabalha?

Home Código Fonte JavaScript - DHTML Efeitos

Aprenda a criar um box flutuante com efeito de entrada

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>&nbsp;</div>
     <FONT FACE="Verdana" SIZE="-1" COLOR="DODGERBLUE"><B>&nbsp;script BigBoy</B></FONT><BR><FONT FACE="Verdana" ="-2"><B>BigBoy desing</B></FONSIZET>
     <BR><BR><FONT FACE="Verdana" SIZE="-2">&nbsp;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>

<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>&nbsp;</div>
     <FONT FACE="Verdana" SIZE="-1" COLOR="DODGERBLUE"><B>&nbsp;script BigBoy</B></FONT><BR><FONT FACE="Verdana" ="-2"><B>BigBoy desing</B></FONSIZET>
     <BR><BR><FONT FACE="Verdana" SIZE="-2">&nbsp;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>

Este código foi útil para você?

Nota	Comentário
10	denunciar usertop comentou em 1/2/2010 Ótimo Muito bom muitos sites utilizam este efeito hoje as vezes até incomoda mas tá de parabéns valeu pelo código
10	denunciar germo comentou em 2/8/2009 un dos melhores um dos melhores java
10	denunciar tarcnux comentou em 30/7/2009 Legal Precisei, encontrei, testei e funfionou. Parabéns
9	denunciar milrak comentou em 15/7/2009 Ótimo Estava em busca desse Script a tempo... achei varios mais que não prestava, ja esse estar perfeitamente perfeito... Ta de parabens!! Shol

Regras:
Os comentários seguem as seguintes regras:

Todos os comentários são enviados por membros cadastrados no site.
A pontuação de comentários de conteúdo do próprio membro não serão computados.
Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
Há um limite de 10 comentários por dia para cada membro.
Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

Autenticação:	Apelido: Senha: (ainda não tem cadastro? clique aqui!)

Título:	Máximo de 30 caracteres
Comentário:	Máximo de 255 caracteres
Avaliação:

Equipe | Tabela de Pontos e Estrelas | Política de Privacidade | Mapa do Site | Fale Conosco

Autor

Carlos Alberto

Tags

DHTML

Efeitos

Compartilhe e guarde

Enquete

Com qual Framework JavaScript você trabalha?

Aprenda a criar um box flutuante com efeito de entrada

Ótimo

un dos melhores

Legal

Ótimo

Comente