SprintDevelop.com - Diseño y desarrollo web - Diseño, desarrollo web,Aplicaciones Móviles, TabletasSprintDevelop.com - Diseño y desarrollo web
Mostrando Codigo - Javascript
Code

Javascript - Efecto destruir un texto al hacer click

Códigos Javascript

Tal y como indica su titulo el texto parecerá que explota a la hora de hacerle un clik con el mouse. Solo hay que modificar la linea 1 con el contenido que queramos.
Visitas: 28,896 - 15/12/2003 0:41:52
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


# Codigo ofrecido por Tutores.org

  1. <BODY>
  2. <DIV onclick="destruye(this)" ID="test4" STYLE="position: absolute; top: 120; left: 300; font: 14 Arial; cursor: crosshair">Pulsame para destrozarme!!</DIV>
  3. <script>
  4. var vectores = new Array()
  5. function destruye(oDiv){
  6.   aText = oDiv.innerText.split('')
  7.   for (i=0; i<aText.length; i++){if (aText[i] == " "){aText[i]=" "}}
  8.   var spans = ""
  9.   for (i=0; i<aText.length; i++){
  10.     spans += "<SPAN ID='"+oDiv.id+"Span1' NAME='"+oDiv.id+"Span1' STYLE="visibility: hidden; position: relative; font:"+(oDiv.style.font)+"">"+aText[i]+"</SPAN>"
  11.   }
  12.   oDiv.innerHTML = spans
  13.   oDiv.onclick = ""
  14.   spans = ""
  15.   var oSpans = document.getElementsByName(oDiv.id+"Span1")
  16.   vectores = new Array()
  17.   for (i=0; i<oSpans.length; i++){
  18.     var datas = new Array()
  19.     var ileft = oSpans[i].offsetLeft
  20.     var itop = oSpans[i].offsetTop
  21.     datas[0] = -((oDiv.offsetWidth/2)-oSpans[i].offsetLeft)/oSpans.length*3
  22.     datas[1] = -(22-Math.abs(((oDiv.offsetWidth/2)-oSpans[i].offsetLeft)/oSpans.length))  
  23.     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>"
  24.     vectores[i] = datas
  25.   }
  26.   oDiv.innerHTML = spans
  27.   for (i=0; i<aText.length; i++){eclate(oDiv.id, i)}
  28. }
  29.  
  30. function eclate(divid, index){
  31.   var oSpan2 = document.getElementById(divid+"Span2_"+index)
  32.   var oDiv = document.getElementById(divid)
  33.   if (oSpan2.offsetTop-oDiv.offsetTop>document.body.offsetHeight)
  34.   {
  35.     oDiv.removeChild(oSpan2)
  36.     return(1)
  37.   }
  38.   oSpan2.style.left = oSpan2.offsetLeft + vectores[index][0]
  39.   oSpan2.style.top = oSpan2.offsetTop + vectores[index][1]
  40.   vectores[index][0] = vectores[index][0]/1.01
  41.   vectores[index][1] = vectores[index][1]+2
  42.   setTimeout("eclate('"+divid+"',"+index+")",50)
  43. }
  44. </script>
  45. </BODY>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Efecto destruir un texto al hacer click" href="http://www.tutores.org/codigo/897/" target="_blank">Efecto destruir un texto al hacer click</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
anonimo
1 5
ah!!" esta lOkazo el codigo xevre ah!""..xD
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad

Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado
Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.