Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

marcelocardoso

[Resolvido] BANNER em javascript que rola pela tela

Por , em Javascript

Recommended Posts

marcelocardoso    6

marcelocardoso
Postado

Pessoal!

 

Moderados do site, poderiam retirar os outros do banco de dados que postei, mas não deu certo. Não sei oque houve.

 

Postei eles pois preciso fazer um banner que role pela tela. Ou seja, quero um banner em imagem que role pela página sempre quando ele mover a pagina para baixo, e se subir novamente a imagem suba para ele poder ficar sempre visualizando ela.

 

E se possível também colocar um botão para ele fechar quando quiser. ok

 

Alguém me indica alguma coisa, alguém tem este exemplo para me passar, já tentei procurar na internet, mas não como procurar exatamente para chegar a este resultado que procuro.

 

Obrigado!

E me desculpe pelo erro nos post's anteriores que deram erram, não sei oque houve, pois não consigo edita-los também, por isso fiz este outro.

 

 

Até mais...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carutcho    0

Carutcho
Postado

fala aee marmmc

 

Existe sim, pode ser que haja algum mais simples q o q vou postar aqui, até pq hj em dia tem frameworks q fazem milagres,

porém eu gosto de achar códigos q mostrem como as coisas funfam por debaixo dos panos rsss entaum procurei mt e achei esse código q vou postar aqui.

 

Sendo q não posso postar os créditos ao autor pq não tinha no codigo, só tem no caso o site de onde peguei na imagem de exemplo do código. Ele estava mt antigo então eu re-formulei algumas coisas apenas , pq ainda estava da época da briga entre netscape e ie4, mas acho q ainda deve dar pra dar uma lapidada melhor nele e deixar ele melhor.

 

 

Absssss e espero ter ajudado.

 

 

<html>
<head>

</head>	
			
<body>



<style>
#floatLayer{
	width:300px;
	position:absolute;  
	backgroud-color: #FFFFFF;
}

</style>

<script language=javascript>

	function closeDiv() {
		document.getElementById('floatLayer').style.display = "none";
		return false;
	}

	window.onerror = null;
	var topMargin = 0;
	var slideTime = 5000;

	var ff = (!document.all && document.getElementById);
	var ie = (document.all);

	function layerObject(id) 
	{
		this.obj = document.getElementById(id).style;
		return this.obj;
	}

	function layerSetup() 
	{
		floatLyr = new layerObject('floatLayer');
		window.setInterval("main()", 10)
	}

	function floatObject() 
	{
		findHt = document.body.clientHeight;
	}

	function main() 
	{
		this.currentY = parseInt(document.getElementById('floatLayer').style.top);		
		this.scrollTop = (ff) ? scrollY : document.body.scrollTop; 
		mainTrigger();		   
	}

	function mainTrigger() {
		var newTargetY = this.scrollTop + this.topMargin;
		if ( this.currentY != newTargetY ) {
			if ( newTargetY != this.targetY ) {
				this.targetY = newTargetY;
				floatStart();
			}
			animator();
			}
		}

	function floatStart() 
	{
		var now = new Date();
		this.A = this.targetY - this.currentY;
		this.B = Math.PI / ( 1 * this.slideTime );
		this.C = now.getTime();
		if (Math.abs(this.A) > this.findHt) 
		{
			this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt;
			this.A = this.A > 0 ? this.findHt : -this.findHt;
		}
		else 
		{
			this.D = this.currentY;
		}
	}

	function animator() 
	{
		var now = new Date();
		var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D;
		newY = Math.round(newY);
		if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) 
		{
			document.getElementById('floatLayer').style.top = newY + "px";
		}
	}
	function start() 
	{
		if(ff) 
		{
			pageWidth = innerWidth;
			pageHeight = innerHeight;
			layerSetup();
			floatObject();
		}
		else
		{
			pageWidth = document.body.clientWidth;
			pageHeight = document.body.clientHeight;
			layerSetup();
			floatObject();
		}
	}
</SCRIPT>
<div id=floatLayer style="200:0px;top:3px;">
<table cellspacing="0" cellpadding="0" width="300" height="300">
  <tr  height="30">
	<td border="3" align="right" bgcolor="#f4f4e8" colspan="4">
	 <b><font size="1" face="Verdana" color="#0000FF">Fechar</font></b><A onClick="return closeDiv()"
	  href=""><b><FONT size="1" face="Verdana" color="#0000FF">[X]</FONT></b></A>

	</td>
  </tr>
  <tr>
	<td border="1" align="center" bgcolor="#f4f4e8" colspan="4">
	<a href="http://www.codigofonte.com.br" target="_blank">
	<img
src="http://www.codigofonte.com.br/img/logo.gif" alt="Codigo Fonte" border="0" ></a>
	</td>
  </tr>
</table>
	 </div>

<script>start()</SCRIPT>
<div style="height:1500px">
</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito