<script>
function popola(){
for (var n=1;n<=300;n++){
document.write("<div id='uno"+n+"' style='position:absolute;left:"+n+"px;top:"+n+"px;background-color:blue;width:2px;height:2px'></div>");
}
}
var coefficiente=1;
var intervallo;
function step(){
for(var n=1;n<=300;n++){
var sinistra=Number((document.getElementById("uno"+n).style.left).replace("px",""));
var alto=Number((document.getElementById("uno"+n).style.top).replace("px",""));
alto=coefficiente*sinistra;
document.getElementById("uno"+n).style.left=sinistra;
document.getElementById("uno"+n).style.top=alto;
}
coefficiente+=.005;
}
function muovi(){
clearInterval(intervallo);
intervallo=setInterval(function() {step()},1);
}
popola();
</script>
<body onClick="muovi();">
</body>
Sarebbe molto meglio che la linea mantenesse la sua lunghezza mentre si muove.Per questo, mi sarà necessario rispolverare un po' di trigonometria...
BLEAH!!!
In Internet Explorer è una linea grossolana che si muove lenta lenta.
Cerco di fare qualche aggiustamento...
<script>
function popola(){
for (var n=1;n<=300;n++){
document.write("<div id='uno"+n+"' style='font-size:1px;position:absolute;left:"+n+"px;top:"+n+"px;background-color:blue;width:2px;height:2px'></div>");
}
}
var coefficiente=1;
var intervallo;
function step(){
for(var n=1;n<=300;n++){
var sinistra=Number((document.getElementById("uno"+n).style.left).replace("px",""));
var alto=Number((document.getElementById("uno"+n).style.top).replace("px",""));
alto=coefficiente*sinistra;
document.getElementById("uno"+n).style.left=sinistra;
document.getElementById("uno"+n).style.top=alto;
}
coefficiente+=.05;
}
function muovi(){
clearInterval(intervallo);
intervallo=setInterval(function() {step()},1);
}
popola();
</script>
<body onClick="muovi();">
</body>
Ho dovuto accelerare il movimento e impostare lo stile font-size a 1 perchè il DIV in Explorer tiene conto anche della grandezza dei caratteri, diversamente da Firefox. Comunque in Explorer si muove più "a scatti"... forse imparerò a usare anche quel browser come si deve, prima o poi...
Nessun commento:
Posta un commento