Publicentral.com - Promocion en cientos de buscadoresPromocion en cientos de buscadores
Mostrando Codigo - Dhtml
Code

Dhtml - Texto apareciendo en documento dinamicamente

Códigos Dhtml

Es un bonito ejemplo de efecto en el cual aparecen uno o varios textos de una forma dinamica en nuestra página. Es altamente configurable.
Visitas: 20,632 - 29/12/2005 22:54:44
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
EXPLICACION
Ver demo.
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. <script LANGUAGE="JavaScript" FPTYPE="dynamicanimation">
  2.   dynamicanimAttr = "dynamicanimation"
  3.   animateElements = new Array()
  4.   currentElement = 0
  5.   speed = 0
  6.   stepsZoom = 8
  7.   stepsWord = 10
  8.   stepsFly = 12
  9.   stepsSpiral = 16
  10.   steps = stepsZoom
  11.   step = 0
  12.   outString = ""
  13.   function dynAnimation()
  14.   {
  15.     var ms = navigator.appVersion.indexOf("MSIE")
  16.     ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
  17.    if(!ie4)
  18.    {
  19.      if((navigator.appName == "Netscape") &&
  20.         (parseInt(navigator.appVersion.substring(0, 1)) >= 4))
  21.      {
  22.        for (index=document.layers.length-1; index >= 0; index--)
  23.         {
  24.             layer=document.layers[index]
  25.             if (layer.left==10000)
  26.                 layer.left=0
  27.         }
  28.       }
  29.       return
  30.     }
  31.     for (index=document.all.length-1; index >= document.body.sourceIndex; index--)
  32.     {
  33.       el = document.all[index]
  34.       animation = el.getAttribute(dynamicanimAttr, false)
  35.       if(null != animation)
  36.       {
  37.         if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
  38.         {
  39.           ih = el.innerHTML
  40.           outString = ""
  41.           i1 = 0
  42.           iend = ih.length
  43.           while(true)
  44.           {
  45.             i2 = startWord(ih, i1)
  46.             if(i2 == -1)
  47.               i2 = iend
  48.             outWord(ih, i1, i2, false, "")
  49.             if(i2 == iend)
  50.               break
  51.             i1 = i2
  52.             i2 = endWord(ih, i1)
  53.             if(i2 == -1)
  54.               i2 = iend
  55.             outWord(ih, i1, i2, true, animation)
  56.             if(i2 == iend)
  57.               break
  58.             i1 = i2
  59.           }
  60.           document.all[index].innerHTML = outString
  61.           document.all[index].style.posLeft = 0
  62.           document.all[index].setAttribute(dynamicanimAttr, null)
  63.         }
  64.         if(animation == "zoomIn" || animation == "zoomOut")
  65.         {
  66.           ih = el.innerHTML
  67.           outString = "<SPAN " + dynamicanimAttr + "="" + animation + "" style="position: relative; left: 10000;">"
  68.           outString += ih
  69.           outString += "</SPAN>"
  70.           document.all[index].innerHTML = outString
  71.           document.all[index].style.posLeft = 0
  72.           document.all[index].setAttribute(dynamicanimAttr, null)
  73.         }
  74.       }
  75.     }
  76.     i = 0
  77.     for (index=document.body.sourceIndex; index < document.all.length; index++)
  78.    {
  79.      el = document.all[index]
  80.      animation = el.getAttribute(dynamicanimAttr, false)
  81.      if (null != animation)
  82.      {
  83.        if(animation == "flyLeft")
  84.        {
  85.          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
  86.          el.style.posTop = 0
  87.        }
  88.        else if(animation == "flyRight")
  89.        {
  90.          el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
  91.          el.style.posTop = 0
  92.        }
  93.        else if(animation == "flyTop" || animation == "dropWord")
  94.        {
  95.          el.style.posLeft = 0
  96.          el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
  97.        }
  98.        else if(animation == "flyBottom")
  99.        {
  100.          el.style.posLeft = 0
  101.          el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
  102.        }
  103.        else if(animation == "flyTopLeft")
  104.        {
  105.          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
  106.          el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
  107.        }
  108.        else if(animation == "flyTopRight" || animation == "flyTopRightWord")
  109.        {
  110.          el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
  111.          el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
  112.        }
  113.        else if(animation == "flyBottomLeft")
  114.        {
  115.          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
  116.          el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
  117.        }
  118.        else if(animation == "flyBottomRight" || animation == "flyBottomRightWord")
  119.        {
  120.          el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
  121.          el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
  122.        }
  123.        else if(animation == "spiral")
  124.        {
  125.          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
  126.          el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
  127.        }
  128.        else if(animation == "zoomIn")
  129.        {
  130.          el.style.posLeft = 10000
  131.          el.style.posTop = 0
  132.        }
  133.        else if(animation == "zoomOut")
  134.        {
  135.          el.style.posLeft = 10000
  136.          el.style.posTop = 0
  137.        }
  138.        else
  139.        {
  140.          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
  141.          el.style.posTop = 0
  142.        }
  143.        el.initLeft = el.style.posLeft
  144.        el.initTop = el.style.posTop
  145.        animateElements[i++] = el
  146.      }
  147.    }
  148.    window.setTimeout("animate();", speed)
  149.  }
  150.  function offsetLeft(el)
  151.  {
  152.    x = el.offsetLeft
  153.    for (e = el.offsetParent; e; e = e.offsetParent)
  154.      x += e.offsetLeft;
  155.    return x
  156.  }
  157.  function offsetTop(el)
  158.  {
  159.    y = el.offsetTop
  160.    for (e = el.offsetParent; e; e = e.offsetParent)
  161.      y += e.offsetTop;
  162.    return y
  163.  }
  164.  function startWord(ih, i)
  165.  {
  166.    for(tag = false; i < ih.length; i++)
  167.    {
  168.      c = ih.charAt(i)
  169.      if(c == '<')
  170.        tag = true
  171.      if(!tag)
  172.        return i
  173.      if(c == '>')
  174.         tag = false
  175.     }
  176.     return -1
  177.   }
  178.   function endWord(ih, i)
  179.   {
  180.     nonSpace = false
  181.     space = false
  182.     while(i < ih.length)
  183.    {
  184.      c = ih.charAt(i)
  185.      if(c != ' ')
  186.        nonSpace = true
  187.      if(nonSpace && c == ' ')
  188.        space = true
  189.      if(c == '<')
  190.        return i
  191.      if(space && c != ' ')
  192.        return i
  193.      i++
  194.    }
  195.    return -1
  196.  }
  197.  function outWord(ih, i1, i2, dyn, anim)
  198.  {
  199.    if(dyn)
  200.      outString += "<SPAN " + dynamicanimAttr + "="" + anim + "" style="position: relative; left: 10000;">"
  201.     outString += ih.substring(i1, i2)
  202.     if(dyn)
  203.       outString += "</SPAN>"
  204.   }
  205.   function animate()
  206.   {
  207.     el = animateElements[currentElement]
  208.     animation = el.getAttribute(dynamicanimAttr, false)
  209.     step++
  210.     if(animation == "spiral")
  211.     {
  212.       steps = stepsSpiral
  213.       v = step/steps
  214.       rf = 1.0 - v
  215.       t = v * 2.0*Math.PI
  216.       rx = Math.max(Math.abs(el.initLeft), 200)
  217.       ry = Math.max(Math.abs(el.initTop),  200)
  218.       el.style.posLeft = Math.ceil(-rf*Math.cos(t)*rx)
  219.       el.style.posTop  = Math.ceil(-rf*Math.sin(t)*ry)
  220.     }
  221.     else if(animation == "zoomIn")
  222.     {
  223.       steps = stepsZoom
  224.       el.style.fontSize = Math.ceil(50+50*step/steps) + "%"
  225.       el.style.posLeft = 0
  226.     }
  227.     else if(animation == "zoomOut")
  228.     {
  229.       steps = stepsZoom
  230.       el.style.fontSize = Math.ceil(100+200*(steps-step)/steps) + "%"
  231.       el.style.posLeft = 0
  232.     }
  233.     else
  234.     {
  235.       steps = stepsFly
  236.       if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
  237.         steps = stepsWord
  238.       dl = el.initLeft / steps
  239.       dt = el.initTop  / steps
  240.       el.style.posLeft = el.style.posLeft - dl
  241.       el.style.posTop = el.style.posTop - dt
  242.     }
  243.     if (step >= steps)
  244.     {
  245.       el.style.posLeft = 0
  246.       el.style.posTop = 0
  247.       currentElement++
  248.       step = 0
  249.     }
  250.     if(currentElement < animateElements.length)
  251.      window.setTimeout("animate();", speed)
  252.  }
  253. <body onload="dynAnimation()">
  254. <table border="0" width="400">
  255.   <tr>
  256.     <td width="100%" align="center" colspan="2" dynamicanimation="dropWord" style="position: relative !important; left: 10000 !important"><br>
  257.    Este seria un texto animado dinamicamente.<br>
  258.     </td>
  259.   <tr>
  260. <div align="center"><center>
  261. <table border="0" width="400">
  262.   <tr>
  263.     <td width="100%" align="center" colspan="2" dynamicanimation="dropWord" style="position: relative !important; left: 10000 !important"><br>
  264.     Mostramos otro ejemplo en otra parte del documento.<br>
  265.     </td>
  266.   <tr>
  267. </center></div>
  268. </body>
  269. </html>
  270.  
  271.  



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Texto apareciendo en documento dinamicamente" href="http://www.tutores.org/codigo/1592/" target="_blank">Texto apareciendo en documento dinamicamente</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
anunimus
1 5
Bueno el script, pero no funciona en Firefox...
Comentario usuario
16/07/2004 8.30.40
1 5
gracia aqui por lo menos se aprede algo vas otro sitio y te manda payasada gracias por todo y de regalo voy elazarte ami pagina te lo mereces dinero apenas ay esta,os eb+n crisis
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.