| <SCRIPT language=javascript> |
002 |
003 | function closeDiv() { |
004 | document.getElementById('floatLayer').style.left = "-1000"; |
005 | return false; |
006 | } |
007 |
008 | window.onerror = null; |
009 | //VALOR DE 75 ABAIXO É A POSIÇÃO ACIMA E ABAIXO DA JANELA// |
010 | var topMargin = 75; |
011 | var slideTime = 1000; |
012 | var ns6 = (!document.all && document.getElementById); |
013 | var ie4 = (document.all); |
014 | var ns4 = (document.layers); |
015 |
016 | function layerObject(id,left) { |
017 | if (ns6) { |
018 | this.obj = document.getElementById(id).style; |
019 | this.obj.left = left; |
020 | return this.obj; |
021 | } |
022 | else if(ie4) { |
023 | this.obj = document.all[id].style; |
024 | this.obj.left = left; |
025 | return this.obj; |
026 | } |
027 | else if(ns4) { |
028 | this.obj = document.layers[id]; |
029 | this.obj.left = left; |
030 | return this.obj; |
031 | } |
032 | } |
033 |
034 | function layerSetup() { |
035 | floatLyr = new layerObject('floatLayer', pageWidth * .2); |
036 | window.setInterval("main()", 10) |
037 | } |
038 |
039 | function floatObject() { |
040 | if (ns4 || ns6) { |
041 | findHt = window.innerHeight; |
042 | } else if(ie4) { |
043 | findHt = document.body.clientHeight; |
044 | } |
045 | } |
046 |
047 | function main() { |
048 | if (ns4) { |
049 | this.currentY = document.layers["floatLayer"].top; |
050 | this.scrollTop = window.pageYOffset; |
051 | mainTrigger(); |
052 | } |
053 | else if(ns6) { |
054 | this.currentY = parseInt(document.getElementById('floatLayer').style.top); |
055 | this.scrollTop = scrollY; |
056 | mainTrigger(); |
057 | } else if(ie4) { |
058 | this.currentY = floatLayer.style.pixelTop; |
059 | this.scrollTop = document.body.scrollTop; |
060 | mainTrigger(); |
061 | } |
062 | } |
063 |
064 | function mainTrigger() { |
065 | var newTargetY = this.scrollTop + this.topMargin; |
066 | if ( this.currentY != newTargetY ) { |
067 | if ( newTargetY != this.targetY ) { |
068 | this.targetY = newTargetY; |
069 | floatStart(); |
070 | } |
071 | animator(); |
072 | } |
073 | } |
074 |
075 | function floatStart() { |
076 | var now = new Date(); |
077 | this.A = this.targetY - this.currentY; |
078 | this.B = Math.PI / ( 1 * this.slideTime ); |
079 | this.C = now.getTime(); |
080 | if (Math.abs(this.A) > this.findHt) { |
081 | this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt; |
082 | this.A = this.A > 0 ? this.findHt : -this.findHt; |
083 | } |
084 | else { |
085 | this.D = this.currentY; |
086 | } |
087 | } |
088 |
089 | function animator() { |
090 | var now = new Date(); |
091 | var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D; |
092 | newY = Math.round(newY); |
093 | if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) { |
094 | if ( ie4 )document.all.floatLayer.style.pixelTop = newY; |
095 | if ( ns4 )document.layers["floatLayer"].top = newY; |
096 | if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px"; |
097 | } |
098 | } |
099 |
100 | function start() { |
101 | if(ns6||ns4) { |
102 | pageWidth = innerWidth; |
103 | pageHeight = innerHeight; |
104 | layerSetup(); |
105 | floatObject(); |
106 | } |
107 | else if(ie4) { |
108 | pageWidth = document.body.clientWidth; |
109 | pageHeight = document.body.clientHeight; |
110 | layerSetup(); |
111 | floatObject(); |
112 | } |
113 | } |
114 | </SCRIPT> |
115 | <DIV id=floatLayer style="LEFT: -1000px; WIDTH:300px; POSITION: absolute; TOP: 3px; 200: 128px; BACKGROUND-COLOR: #FFFFFF"> |
116 | <!--VALOR DE 300 E 300 ACIMA É O TAMANHO DA JANELA--> |
117 | <table border="1" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF" width="300" height="300"> |
118 | <tr height="30"> |
119 | <td border="3" align="right" bgcolor="#f4f4e8" colspan="4"> |
120 | <b><font size="1" face="Verdana" color="#0000FF">Fechar</font></b><A onclick="return closeDiv()" |
121 | href=""><b><FONT size="1" face="Verdana" color="#0000FF">[X]</FONT></b></A> |
122 |
123 | </td> |
124 | </tr> |
125 | <tr> |
126 | <td border="1" align="center" bgcolor="#f4f4e8" colspan="4"> |
127 | <a href="http://www.codigofonte.com.br" target="_blank"> |
128 | <img |
129 | src="http://www.codigofonte.com.br/img/logo.gif" alt="Codigo Fonte" border="0" ></a> |
130 | </td> |
131 | </tr> |
132 | </table> |
133 | </DIV> |
134 |
135 | <SCRIPT>start()</SCRIPT>VEJA O CODIGO EM AÇÃO |
Comentários