Código Fonte - O melhor conteúdo para programadores

Autor

Compartilhe e guarde

Enquete

Você se preocupa em desenvolver usando Web Standards?

Não me procupo com isso
Procuro usar, mas quando não dá eu não uso
Sim, meus projetos são 100% padronizados
Às vezes eu uso

Home Código Fonte JavaScript - DHTML Efeitos

Imagem giratória em torno do botão

Este código apresenta um efeito muito interessante. Ao clicar em um botão uma imagem gira 360 graus em torno do botão.

Este tipo de efeito pode ser utilizado de diversas formas dentro de uma página web, como em peças publicitárias, por exemplo.

<html>
<head>
<title>Imagem giratória</title>
<script language="JavaScript">
var timeout = null
var funcao = null

function init() {
	if(funcao=='1'||funcao==null) sobe()
	else if(funcao=='2') desce()
	else if(funcao=='3') frente()
	else if(funcao=='4') tras()
}

function sobe(){
	funcao = 1
	tempo = setTimeout("sobe()", 1)
	timeout = 1
	var divi = div.style
	var action = -5
	divi.xpos = parseInt(divi.top)
	if(divi.xpos==80){
		clearTimeout(tempo)
		frente()
	}
	divi.xpos += action
	divi.top = divi.xpos
}

function desce(){
	funcao = 2
	time = setTimeout("desce()", 1)
	timeout = 2
	var divo = div.style
	var action = 5
	divo.ypos = parseInt(divo.top)
	if(divo.ypos==350){
		clearTimeout(time)
		tras()
	}
	divo.ypos += action
	divo.top = divo.ypos
}


function frente(){
	funcao = 3
	terceiro = setTimeout("frente()", 1)
	timeout = 3
	var divs = div.style
	var action = 5
	divs.zpos = parseInt(divs.left)
	if(divs.zpos==600){
		clearTimeout(terceiro)
		desce()
	}
	divs.zpos += action
	divs.left = divs.zpos
}

function tras(){
	funcao = 4
	quarto = setTimeout("tras()", 1)
	timeout = 4
	var divx = div.style
	var action = -5
	divx.cpos = parseInt(divx.left)
	if(divx.cpos==180){
		clearTimeout(quarto)
		sobe()
	}
	divx.cpos += action
	divx.left = divx.cpos
}
</script>
</head>
<body bgcolor=#FFFFFF>

<div id="div" style="top: 350; left: 100; position: absolute"><img src="http://www.codigofonte.com.br/img/logo.gif"></div>

<div style="top: 200; left: 450; position: absolute">
	<input type=button name=comeca onclick="init(); this.style.visibility='hidden'; stop.style.visibility='visible'; this.value='Reiniciar'" value="Iniciar" style="width:100px; visibility: visible; position: absolute; top:0; left:0"><br><input name=stop type=button value="Parar" onclick="if(timeout=='1') { clearTimeout(tempo) } else if(timeout=='2') { clearTimeout(time) } else if(timeout=='3') { clearTimeout(terceiro) } else if(timeout=='4') { clearTimeout(quarto) }; comeca.style.visibility='visible'; this.style.visibility='hidden'" style="width:100px; visibility: hidden; position: absolute; top:0; left:0">
</div>

</body>
</html>

<html>
<head>
<title>Imagem giratória</title>
<script language="JavaScript">
var timeout = null
var funcao = null

function init() {
	if(funcao=='1'||funcao==null) sobe()
	else if(funcao=='2') desce()
	else if(funcao=='3') frente()
	else if(funcao=='4') tras()
}

function sobe(){
	funcao = 1
	tempo = setTimeout("sobe()", 1)
	timeout = 1
	var divi = div.style
	var action = -5
	divi.xpos = parseInt(divi.top)
	if(divi.xpos==80){
		clearTimeout(tempo)
		frente()
	}
	divi.xpos += action
	divi.top = divi.xpos
}

function desce(){
	funcao = 2
	time = setTimeout("desce()", 1)
	timeout = 2
	var divo = div.style
	var action = 5
	divo.ypos = parseInt(divo.top)
	if(divo.ypos==350){
		clearTimeout(time)
		tras()
	}
	divo.ypos += action
	divo.top = divo.ypos
}

function frente(){
	funcao = 3
	terceiro = setTimeout("frente()", 1)
	timeout = 3
	var divs = div.style
	var action = 5
	divs.zpos = parseInt(divs.left)
	if(divs.zpos==600){
		clearTimeout(terceiro)
		desce()
	}
	divs.zpos += action
	divs.left = divs.zpos
}

function tras(){
	funcao = 4
	quarto = setTimeout("tras()", 1)
	timeout = 4
	var divx = div.style
	var action = -5
	divx.cpos = parseInt(divx.left)
	if(divx.cpos==180){
		clearTimeout(quarto)
		sobe()
	}
	divx.cpos += action
	divx.left = divx.cpos
}
</script>
</head>
<body bgcolor=#FFFFFF>

</body>
</html>

Este código foi útil para você?

Nota	Comentário
Ainda não foi enviado nenhum comentário.

Regras:
Os comentários seguem as seguintes regras:

Todos os comentários são enviados por membros cadastrados no site.
A pontuação de comentários de conteúdo do próprio membro não serão computados.
Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
Há um limite de 10 comentários por dia para cada membro.
Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

Autenticação:	Apelido: Senha: (ainda não tem cadastro? clique aqui!)

Título:	Máximo de 30 caracteres
Comentário:	Máximo de 255 caracteres
Avaliação:

Equipe | Tabela de Pontos e Estrelas | Política de Privacidade | Mapa do Site | Fale Conosco

Autor

Fabio Poletto

Tags

Efeitos

Compartilhe e guarde

Enquete

Você se preocupa em desenvolver usando Web Standards?

Imagem giratória em torno do botão

Comente