Aprenda a criar um box flutuante com efeito de entrada
Autor: Edson Cardoso | Publicado: 2011-07-14T20:43:00-07:00

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.


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

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

&nbsp; &nbsp;function initbox(){
&nbsp; &nbsp; if (!dom&amp;&amp;!ie&amp;&amp;!ns4)
&nbsp; &nbsp; return
&nbsp; &nbsp; crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
&nbsp; &nbsp; scroll_top=(ie)? document.body.scrollTop : window.pageYOffset
&nbsp; &nbsp; crossobj.top=scroll_top-250
&nbsp; &nbsp; crossobj.visibility=(dom||ie)? "visible" : "show"
&nbsp; &nbsp; dropstart=setInterval("dropin()",50)
&nbsp; &nbsp;}
&nbsp; &nbsp;function dropin(){
&nbsp; &nbsp; scroll_top=(ie)? document.body.scrollTop : window.pageYOffset
&nbsp; &nbsp; if (parseInt(crossobj.top)&lt;100+scroll_top)
&nbsp; &nbsp; crossobj.top=parseInt(crossobj.top)+40
&nbsp; &nbsp; else{
&nbsp; &nbsp; &nbsp;clearInterval(dropstart)
&nbsp; &nbsp; &nbsp;bouncestart=setInterval("bouncein()",50)
&nbsp; &nbsp; }
&nbsp; &nbsp;}
&nbsp; &nbsp;function bouncein(){
&nbsp; &nbsp; crossobj.top=parseInt(crossobj.top)-bouncelimit
&nbsp; &nbsp; if (bouncelimit&lt;0)
&nbsp; &nbsp; bouncelimit+=8
&nbsp; &nbsp; bouncelimit=bouncelimit*-1
&nbsp; &nbsp; if (bouncelimit==0){
&nbsp; &nbsp; &nbsp;clearInterval(bouncestart)
&nbsp; &nbsp; }
&nbsp; &nbsp;}
&nbsp; &nbsp;function dismissbox(){
&nbsp; &nbsp; if (window.bouncestart) clearInterval(bouncestart)
&nbsp; &nbsp; crossobj.visibility="hidden"
&nbsp; &nbsp;}
&nbsp; &nbsp;function get_cookie(Name) {
&nbsp; &nbsp; var search = Name + "="
&nbsp; &nbsp; var returnvalue = ""
&nbsp; &nbsp; if (document.cookie.length &gt; 0) {
&nbsp; &nbsp; &nbsp;offset = document.cookie.indexOf(search)
&nbsp; &nbsp; &nbsp;if (offset != -1) {
&nbsp; &nbsp; &nbsp; offset += search.length
&nbsp; &nbsp; &nbsp; end = document.cookie.indexOf(";", offset)
&nbsp; &nbsp; &nbsp; if (end == -1)
&nbsp; &nbsp; &nbsp; end = document.cookie.length;
&nbsp; &nbsp; &nbsp; returnvalue=unescape(document.cookie.substring(offset, end))
&nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; }
&nbsp; &nbsp; return returnvalue;
&nbsp; &nbsp;}
&nbsp; &nbsp;function dropornot(){
&nbsp; &nbsp; if (get_cookie("droppedin")==""){
&nbsp; &nbsp; &nbsp;window.onload=initbox
&nbsp; &nbsp; &nbsp;document.cookie="droppedin=yes"
&nbsp; &nbsp; }
&nbsp; &nbsp;}
&nbsp; &nbsp;dropornot()
&nbsp; &nbsp;function redo(){
&nbsp; &nbsp; bouncelimit=32
&nbsp; &nbsp; direction="up"
&nbsp; &nbsp; initbox()
&nbsp; &nbsp;}
&nbsp; &nbsp;window.onload=initbox
&nbsp; &lt;/script&gt;
&nbsp;&lt;/HEAD&gt;
&nbsp;&lt;BODY&gt;
&nbsp; &lt;div id="dropin" style="position:absolute;visibility:hidden;left:50;top:0;width:500;height:150;background-color:#F5F5F5"&gt;
&nbsp; &nbsp;&lt;TABLE WIDTH="100%" HEIGHT="100%" BORDER="1" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR="#000000"&gt;
&nbsp; &nbsp; &lt;TR&gt;
&nbsp; &nbsp; &nbsp;&lt;TD valign="top"&gt;&lt;div align="right"&gt;&lt;a class="link" href="javascript:dismissbox()"&gt;&lt;FONT FACE="Verdana" SIZE="-2"&gt;&lt;B&gt;X&lt;/B&gt;&lt;/FONT&gt;&lt;/a&gt;&amp;nbsp;&lt;/div&gt;
&nbsp; &nbsp; &nbsp;&lt;FONT FACE="Verdana" SIZE="-1" COLOR="DODGERBLUE"&gt;&lt;B&gt;&amp;nbsp;script BigBoy&lt;/B&gt;&lt;/FONT&gt;&lt;BR&gt;&lt;FONT FACE="Verdana" ="-2"&gt;&lt;B&gt;BigBoy desing&lt;/B&gt;&lt;/FONSIZET&gt;
&nbsp; &nbsp; &nbsp;&lt;BR&gt;&lt;BR&gt;&lt;FONT FACE="Verdana" SIZE="-2"&gt;&amp;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!&lt;/FONT&gt;&lt;/TD&gt; &nbsp; &nbsp;&lt;/TR&gt;
&nbsp; &nbsp;&lt;/TABLE&gt;
&nbsp; &lt;/div&gt;
&nbsp; &lt;A href="javascript:redo()"&gt;Cair janela novamente&lt;/A&gt;
&nbsp; &lt;/BODY&gt;
&lt;/HTML&gt;