Ir para conteúdo

POWERED BY:

Arquivado

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

Shwa

[Resolvido] Floater animado sobrepondo a página em qualquer resol

Recommended Posts

Fica aí um código legal de um floater que se move infinitamente na tela e rebate nos cantos, não importa a resolução do usuário. Também não é obstrutivo, pois os elementos são criados a partir do próprio Javascript.

 

A imagem de exemplo:

Imagem Postada

 

O código:

var q = 'passaro.gif'; // nome do arquivo
var imagem = q.split('.');
var id_imagem = imagem[0];

var h = 0;
var w = 0;

window.onload = function(){
	createFloater( 'img', id_imagem, '0', q );
	createFloater( 'div', 'cobaia', '50%' );
	mover( id_imagem, 5 );
	id( id_imagem ).onclick=function()
	{
		id( id_imagem ).style.display='none';
	}
}
function id( id )
{
	return document.getElementById( id );
}
function mover( ele, qnto )
{
	var top = parseInt( id( ele ).style.top );
	var left = parseInt( id( ele ).style.left );

	var body_width = document.body.clientWidth - id( ele ).width;
	var body_height = id('cobaia').offsetTop*2 - id( ele ).height;

	var new_top = dimensao( h, body_height, qnto, top );
	var new_left = dimensao( w, body_width, qnto, left );	

	if( top<0 ) h = 0;
	if( left<0 ) w = 0;

	id( ele ).style.top = new_top;
	id( ele ).style.left = new_left;

	h++;
	w++;
	window.setTimeout("mover( '"+ele+"', 5, '"+q+"' )", 20);
}
function dimensao( count, dimensao, qnto, direcao )
{
	if( count<dimensao/qnto )
		return parseInt(direcao)+qnto+'px';
	else
		return parseInt(direcao)-qnto+'px';
}
function createFloater( el, id, top, src )
{
	var floater = document.createElement( el );
	
	if( el=='img' )
		floater.src = src;
	floater.id = id;

	if ( document.all )
		floater.style.position = 'absolute';
	else
		floater.style.position = 'fixed';
	floater.style.top = top;
	floater.style.left ='0';
	floater.style.cursor ='pointer';
	
	document.body.appendChild( floater );
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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