Ecco il codice di una palla che si espande e si riduce:
<html>
<head>
<style>
.celeste{
position:absolute;
top:200px;
left:500px;
width:300px;
height:300px;
background:cyan;
border-radius:400;
}
</style>
<script>
function $(id){
return document.getElementById(id);
}
var intervallo=2;
var tempo=10;
function gonfia(){
var oggetto=document.getElementById("primo")
oggetto.style.width=oggetto.offsetWidth+intervallo+"px";
oggetto.style.height=oggetto.offsetHeight+intervallo+"px";
oggetto.style.left=oggetto.offsetLeft-(intervallo/2)+"px";
oggetto.style.top=oggetto.offsetTop-(intervallo/2)+"px";
if (oggetto.offsetWidth>500 || oggetto.offsetWidth<100) intervallo=-intervallo;
setTimeout(gonfia,tempo);
}
window.onload=gonfia;
</script>
</head>
<body>
<div id='primo' class='celeste'></div>
</body>
</html>
Non si può usare come intervallo il valore di 1, perchè non si può dividere un pixel per due, e quindi la palla non si espande uniformemente rispetto a un centro ma cambia posizione.
Nessun commento:
Posta un commento