JavaScript - DHTML / Efeitos

Imagem giratória em torno do botão

enviado por Fabio Poletto

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>

Versão impressa gerada em: sexta-feira, 27 de novembro de 2009