Aprenda a criar um box flutuante com efeito de entrada

 

Veja abaixo o código:

01<HTML>
02 <HEAD>
03  <TITLE></TITLE>
04  <STYLE>
05   A.link:link {color: black; text-decoration: none}
06   A.link:visited {color: black; text-decoration: none}
07   A.link:active {color: black; text-decoration: none}
08   A.link:hover {color: black; text-decoration : none;}
09  </STYLE>
10  <script language="JavaScript1.2">
11   var ie=document.all
12   var dom=document.getElementById
13   var ns4=document.layers
14  
15   var bouncelimit=32 //(must be divisible by 8)
16   var direction="up"
17  
18   function initbox(){
19    if (!dom&&!ie&&!ns4)
20    return
21    crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
22    scroll_top=(ie)? document.body.scrollTop : window.pageYOffset
23    crossobj.top=scroll_top-250
24    crossobj.visibility=(dom||ie)? "visible" : "show"
25    dropstart=setInterval("dropin()",50)
26   }
27   function dropin(){
28    scroll_top=(ie)? document.body.scrollTop : window.pageYOffset
29    if (parseInt(crossobj.top)<100+scroll_top)
30    crossobj.top=parseInt(crossobj.top)+40
31    else{
32     clearInterval(dropstart)
33     bouncestart=setInterval("bouncein()",50)
34    }
35   }
36   function bouncein(){
37    crossobj.top=parseInt(crossobj.top)-bouncelimit
38    if (bouncelimit<0)
39    bouncelimit+=8
40    bouncelimit=bouncelimit*-1
41    if (bouncelimit==0){
42     clearInterval(bouncestart)
43    }
44   }
45   function dismissbox(){
46    if (window.bouncestart) clearInterval(bouncestart)
47    crossobj.visibility="hidden"
48   }
49   function get_cookie(Name) {
50    var search = Name + "="
51    var returnvalue = ""
52    if (document.cookie.length > 0) {
53     offset = document.cookie.indexOf(search)
54     if (offset != -1) {
55      offset += search.length
56      end = document.cookie.indexOf(";", offset)
57      if (end == -1)
58      end = document.cookie.length;
59      returnvalue=unescape(document.cookie.substring(offset, end))
60     }
61    }
62    return returnvalue;
63   }
64   function dropornot(){
65    if (get_cookie("droppedin")==""){
66     window.onload=initbox
67     document.cookie="droppedin=yes"
68    }
69   }
70   dropornot()
71   function redo(){
72    bouncelimit=32
73    direction="up"
74    initbox()
75   }
76   window.onload=initbox
77  </script>
78 </HEAD>
79 <BODY>
80  <div id="dropin" style="position:absolute;visibility:hidden;left:50;top:0;width:500;height:150;background-color:#F5F5F5">
81   <TABLE WIDTH="100%" HEIGHT="100%" BORDER="1" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR="#000000">
82    <TR>
83     <TD valign="top"><div align="right"><a class="link" href="javascript:dismissbox()"><FONT FACE="Verdana" SIZE="-2"><B>X</B></FONT></a> </div>
84     <FONT FACE="Verdana" SIZE="-1" COLOR="DODGERBLUE"><B> script BigBoy</B></FONT><BR><FONT FACE="Verdana" ="-2"><B>BigBoy desing</B></FONSIZET>
85     <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>
86   </TABLE>
87  </div>
88  <A href="javascript:redo()">Cair janela novamente</A>
89  </BODY>
90</HTML>

VEJA O CODIGO EM AÇÃO 


Comentários

Anterior Proxima Página inicial