comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[JavaScript][MEDIO] Texto que aparece palabra por palabra

  • 0 Respuestas
  • 1096 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Conectado ANTRAX

  • *
  • Administrator
  • Mensajes: 5395
  • Actividad:
    35%
  • Reputación 31
  • ANTRAX
    • Ver Perfil
    • Underc0de
    • Email
  • Skype: underc0de.org
  • Twitter: @Underc0de
« en: Febrero 24, 2010, 11:16:49 am »
Con este script te aparece el texto que tu quieras desde la parte superior derecha de la pantalla.

Código: Javascript
  1. <html>
  2.  
  3. <head>
  4. <title>Texto que aparece palabra a palabra</title>
  5. <script LANGUAGE="JavaScript">
  6.   dynamicanimAttr = "mydynamicanimation"
  7.   animateElements = new Array()
  8.   currentElement = 0
  9.   speed = 0
  10.   stepsZoom = 8
  11.   stepsWord = 8
  12.   stepsFly = 12
  13.   stepsSpiral = 16
  14.   steps = stepsZoom
  15.   step = 0
  16.   outString = ""
  17.   function mydynAnimation()
  18.   {
  19.     var ms = navigator.appVersion.indexOf("MSIE")
  20.     ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
  21.     if(!ie4)
  22.     {
  23.       if((navigator.appName == "Netscape") &&
  24.          (parseInt(navigator.appVersion.substring(0, 1)) >= 4))
  25.       {
  26.         for (index=document.layers.length-1; index >= 0; index--)
  27.         {
  28.             layer=document.layers[index]
  29.             if (layer.left==10000)
  30.                 layer.left=0
  31.         }
  32.       }
  33.       return
  34.     }
  35.     for (index=document.all.length-1; index >= document.body.sourceIndex; index--)
  36.     {
  37.       el = document.all[index]
  38.       animation = el.getAttribute(dynamicanimAttr, false)
  39.       if(null != animation)
  40.       {
  41.         if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
  42.         {
  43.           ih = el.innerHTML
  44.           outString = ""
  45.           i1 = 0
  46.           iend = ih.length
  47.           while(true)
  48.           {
  49.             i2 = startWord(ih, i1)
  50.             if(i2 == -1)
  51.               i2 = iend
  52.             outWord(ih, i1, i2, false, "")
  53.             if(i2 == iend)
  54.               break
  55.             i1 = i2
  56.             i2 = endWord(ih, i1)
  57.             if(i2 == -1)
  58.               i2 = iend
  59.             outWord(ih, i1, i2, true, animation)
  60.             if(i2 == iend)
  61.               break
  62.             i1 = i2
  63.           }
  64.           document.all[index].innerHTML = outString
  65.           document.all[index].style.posLeft = 0
  66.           document.all[index].setAttribute(dynamicanimAttr, null)
  67.         }
  68.         if(animation == "zoomIn" || animation == "zoomOut")
  69.         {
  70.           ih = el.innerHTML
  71.           outString = "<SPAN " + dynamicanimAttr + "=\"" + animation + "\" style=\"position: relative; left: 10000;\">"
  72.           outString += ih
  73.           outString += "</SPAN>"
  74.           document.all[index].innerHTML = outString
  75.           document.all[index].style.posLeft = 0
  76.           document.all[index].setAttribute(dynamicanimAttr, null)
  77.         }
  78.       }
  79.     }
  80.     i = 0
  81.     for (index=document.body.sourceIndex; index < document.all.length; index++)
  82.     {
  83.       el = document.all[index]
  84.       animation = el.getAttribute(dynamicanimAttr, false)
  85.       if (null != animation)
  86.       {
  87.         if(animation == "flyLeft")
  88.         {
  89.           el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
  90.           el.style.posTop = 0
  91.         }
  92.         else if(animation == "flyRight")
  93.         {
  94.           el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
  95.           el.style.posTop = 0
  96.         }
  97.         else if(animation == "flyTop" || animation == "dropWord")
  98.         {
  99.           el.style.posLeft = 0
  100.           el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
  101.         }
  102.         else if(animation == "flyBottom")
  103.         {
  104.           el.style.posLeft = 0
  105.           el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
  106.         }
  107.         else if(animation == "flyTopLeft")
  108.         {
  109.           el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
  110.           el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
  111.         }
  112.         else if(animation == "flyTopRight" || animation == "flyTopRightWord")
  113.         {
  114.           el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
  115.           el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
  116.         }
  117.         else if(animation == "flyBottomLeft")
  118.         {
  119.           el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
  120.           el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
  121.         }
  122.         else if(animation == "flyBottomRight" || animation == "flyBottomRightWord")
  123.         {
  124.           el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
  125.           el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
  126.         }
  127.         else if(animation == "spiral")
  128.         {
  129.           el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
  130.           el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
  131.         }
  132.         else if(animation == "zoomIn")
  133.         {
  134.           el.style.posLeft = 10000
  135.           el.style.posTop = 0
  136.         }
  137.         else if(animation == "zoomOut")
  138.         {
  139.           el.style.posLeft = 10000
  140.           el.style.posTop = 0
  141.         }
  142.         else
  143.         {
  144.           el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
  145.           el.style.posTop = 0
  146.         }
  147.         el.initLeft = el.style.posLeft
  148.         el.initTop = el.style.posTop
  149.         animateElements[i++] = el
  150.       }
  151.     }
  152.     window.setTimeout("animate();", speed)
  153.   }
  154.   function offsetLeft(el)
  155.   {
  156.     x = el.offsetLeft
  157.     for (e = el.offsetParent; e; e = e.offsetParent)
  158.       x += e.offsetLeft;
  159.     return x
  160.   }
  161.   function offsetTop(el)
  162.   {
  163.     y = el.offsetTop
  164.     for (e = el.offsetParent; e; e = e.offsetParent)
  165.       y += e.offsetTop;
  166.     return y
  167.   }
  168.   function startWord(ih, i)
  169.   {
  170.     for(tag = false; i < ih.length; i++)
  171.     {
  172.       c = ih.charAt(i)
  173.       if(c == '<')
  174.         tag = true
  175.       if(!tag)
  176.         return i
  177.       if(c == '>')
  178.         tag = false
  179.     }
  180.     return -1
  181.   }
  182.   function endWord(ih, i)
  183.   {
  184.     nonSpace = false
  185.     space = false
  186.     while(i < ih.length)
  187.     {
  188.       c = ih.charAt(i)
  189.       if(c != ' ')
  190.         nonSpace = true
  191.       if(nonSpace && c == ' ')
  192.         space = true
  193.       if(c == '<')
  194.         return i
  195.       if(space && c != ' ')
  196.         return i
  197.       i++
  198.     }
  199.     return -1
  200.   }
  201.   function outWord(ih, i1, i2, dyn, anim)
  202.   {
  203.     if(dyn)
  204.       outString += "<SPAN " + dynamicanimAttr + "=\"" + anim + "\" style=\"position: relative; left: 10000;\">"
  205.     outString += ih.substring(i1, i2)
  206.     if(dyn)
  207.       outString += "</SPAN>"
  208.   }
  209.   function animate()
  210.   {
  211.     el = animateElements[currentElement]
  212.     animation = el.getAttribute(dynamicanimAttr, false)
  213.     step++
  214.     if(animation == "spiral")
  215.     {
  216.       steps = stepsSpiral
  217.       v = step/steps
  218.       rf = 1.0 - v
  219.       t = v * 2.0*Math.PI
  220.       rx = Math.max(Math.abs(el.initLeft), 200)
  221.       ry = Math.max(Math.abs(el.initTop),  200)
  222.       el.style.posLeft = Math.ceil(-rf*Math.cos(t)*rx)
  223.       el.style.posTop  = Math.ceil(-rf*Math.sin(t)*ry)
  224.     }
  225.     else if(animation == "zoomIn")
  226.     {
  227.       steps = stepsZoom
  228.       el.style.fontSize = Math.ceil(50+50*step/steps) + "%"
  229.       el.style.posLeft = 0
  230.     }
  231.     else if(animation == "zoomOut")
  232.     {
  233.       steps = stepsZoom
  234.       el.style.fontSize = Math.ceil(100+200*(steps-step)/steps) + "%"
  235.       el.style.posLeft = 0
  236.     }
  237.     else
  238.     {
  239.       steps = stepsFly
  240.       if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
  241.         steps = stepsWord
  242.       dl = el.initLeft / steps
  243.       dt = el.initTop  / steps
  244.       el.style.posLeft = el.style.posLeft - dl
  245.       el.style.posTop = el.style.posTop - dt
  246.     }
  247.     if (step >= steps)
  248.     {
  249.       el.style.posLeft = 0
  250.       el.style.posTop = 0
  251.       currentElement++
  252.       step = 0
  253.     }
  254.     if(currentElement < animateElements.length)
  255.       window.setTimeout("animate();", speed)
  256.   }
  257. </script>
  258.  
  259. <style>
  260. .link {
  261.  
  262.         color : orange;
  263.         font-weight : bold;
  264.         text-decoration : none;
  265.        
  266. }
  267.  
  268. A.link:hover {
  269.         color : lime;
  270. }
  271.  
  272. A.link:active {
  273.         color : greenyellow;
  274.         text-decoration : none;
  275.         text-transform : uppercase;
  276. }
  277. </style>
  278. </head>
  279.  
  280. <body onLoad="mydynAnimation()" link="#0000FF" text="#00FF00" VLINK="#0000FF">
  281.  
  282. <p align="center" style="LEFT: 10000px! important; POSITION: relative! important"
  283. mydynamicanimation="flyTopRightWord"><a href="http://www.uterra.com"
  284. class="link"><font FACE="ARIAL" SIZE="6" color="blue"></font></a></p>
  285.  
  286. <p align="center" style="LEFT: 10000px! important; POSITION: relative! important"
  287. mydynamicanimation="flyTopRightWord"><font FACE="ARIAL" SIZE="6" color="blue"><a
  288. href="http://www.uterra.com" class="link">Bienvenido a UTERRA.COM</a></font></p>
  289.  
  290. </body>
  291. </html>
« Última modificación: Abril 18, 2014, 11:26:22 am por Expermicid »


 

¿Te gustó el post? COMPARTILO!



[JavaScript][BASICO] Resolver funciones matemáticas (Versión simple) By 2Fac3R

Iniciado por 2Fac3R

Respuestas: 0
Vistas: 1096
Último mensaje Diciembre 23, 2012, 12:55:06 am
por 2Fac3R
[JavaScript] 4 clase: Datos Boleanos o Logicos, variables indefinidas o nulas

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1454
Último mensaje Febrero 24, 2010, 11:02:19 am
por ANTRAX
[JavaScript] 5 clase: Funcion typeof y reasignacion dinamica de variables

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1626
Último mensaje Febrero 24, 2010, 11:03:06 am
por ANTRAX
[JavaScript][AVANZADO] Trabajar con DOM desde Firefox e Internet Explorer

Iniciado por arthusu

Respuestas: 0
Vistas: 1560
Último mensaje Julio 16, 2011, 07:05:12 pm
por arthusu
[PDF] 144 Libros - La guía suprema de JAVASCRIPT - NODE.JS - D3.JS - REACT

Iniciado por graphixx

Respuestas: 0
Vistas: 430
Último mensaje Septiembre 22, 2018, 01:02:12 am
por graphixx