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>
Postagens
0 comentários:
Postar um comentário