Cliquez sur le texte pour voir l'effet :o)
Source / Exemple :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<DIV onclick="DestroyText(this)" ID="test4" STYLE="position: absolute; top: 120; left: 300; font: 14 Arial; cursor: crosshair">ne tirez pas sur l'ambulance !</DIV>
<SCRIPT>
var vectors = new Array()
function DestroyText(oDiv){
aText = oDiv.innerText.split('')
for (i=0; i<aText.length; i++){if (aText[i] == " "){aText[i]=" "}}
var spans = ""
for (i=0; i<aText.length; i++){
spans += "<SPAN ID='"+oDiv.id+"Span1' NAME='"+oDiv.id+"Span1' STYLE=\"visibility: hidden; position: relative; font:"+(oDiv.style.font)+"\">"+aText[i]+"</SPAN>"
}
oDiv.innerHTML = spans
oDiv.onclick = ""
spans = ""
var oSpans = document.getElementsByName(oDiv.id+"Span1")
vectors = new Array()
for (i=0; i<oSpans.length; i++){
var datas = new Array()
var ileft = oSpans[i].offsetLeft
var itop = oSpans[i].offsetTop
datas[0] = -((oDiv.offsetWidth/2)-oSpans[i].offsetLeft)/oSpans.length*3
datas[1] = -(22-Math.abs(((oDiv.offsetWidth/2)-oSpans[i].offsetLeft)/oSpans.length))
spans += "<SPAN ID='"+oDiv.id+"Span2_"+i+"' NAME='"+oDiv.id+"Span2_"+i+"' STYLE='position: absolute; top: "+oSpans[i].offsetTop+"; left: "+oSpans[i].offsetLeft+";'>"+aText[i]+"</SPAN>"
vectors[i] = datas
}
oDiv.innerHTML = spans
for (i=0; i<aText.length; i++){eclate(oDiv.id, i)}
}
function eclate(divid, index){
var oSpan2 = document.getElementById(divid+"Span2_"+index)
var oDiv = document.getElementById(divid)
if (oSpan2.offsetTop-oDiv.offsetTop>document.body.offsetHeight)
{
oDiv.removeChild(oSpan2)
return(1)
}
oSpan2.style.left = oSpan2.offsetLeft + vectors[index][0]
oSpan2.style.top = oSpan2.offsetTop + vectors[index][1]
vectors[index][0] = vectors[index][0]/1.01
vectors[index][1] = vectors[index][1]+2
setTimeout("eclate('"+divid+"',"+index+")",50)
}
</SCRIPT>
</BODY>
</HTML>
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.