Basta cliccare su un oggetto DIV e questo fa un bel salto in avanti!
Devo provarlo con IE.
<script>
function oggetto(nome){
var MioNome=nome;
var str=document.getElementById(MioNome).style.left
var Sinistra=Number(str.replace("px",""));
this.step=function(){
Sinistra+=100
document.getElementById(MioNome).style.left=Sinistra;
}
}
function crea(){
for(var n=0;n<document.getElementsByTagName("div").length;n++)
{
var DivId=document.getElementsByTagName("div")[n].id;
window[DivId] = new oggetto(DivId);
}
}
function azione(e){
window[e.currentTarget.id].step();
}
</script>
<body onLoad="crea()">
<div id="ciccio" style="position:absolute;top:0px" onClick="azione(event)"> blablablablabla</div>
<div id="pippo" style="position:absolute;top:100px" onClick="azione(event)">ciao</div>
<div id="mimmo" style="position:absolute;top:200px" onClick="azione(event)">Buh</div>
</body>
Con Internet Explorer non funziona.
Continuo con Firefox e poi cercherò di imparare il dialetto Explorer...
Analisi:
1)function oggetto():
function oggetto(nome){
var MioNome=nome;
var str=document.getElementById(MioNome).style.left
var Sinistra=Number(str.replace("px",""));
this.step=function(){
Sinistra+=100
document.getElementById(MioNome).style.left=Sinistra;
}
}
Crea una variabile MioNome alla quale attribuire il parametro "nome";Converti il valore dell'attributo "style.left" dell'elemento che si chiama con il nome in questione in un valore numerico e attribuiscilo alla variabile "Sinistra";
Crea una funzione locale "step()" che aumenta di 100 il valore sinistra e poi attribuisce questo valore all'attributo "style.left" dell'elemento che porta questo stesso nome.
2)function crea():
function crea(){
for(var n=0;n<document.getElementsByTagName("div").length;n++)
{
var DivId=document.getElementsByTagName("div")[n].id;
window[DivId] = new oggetto(DivId);
}
}
Per ogni elemento del documento che ha per tag "div";assegna alla variabile DivId il valore di id dell'elemento in questione;
Crea una variabile con il nome di quell'id e usala per creare un nuovo oggetto della classe "oggetto".
3)function azione()
function azione(e){
window[e.currentTarget.id].step();
}
esegue il metodo step() dell'istanza della classe oggetto che porta il nome uguale a quello dell'id dell'oggetto da cui proviene l'evento.
Nessun commento:
Posta un commento