Cursor con texto HTML //Cursor con texto en movimiento // -

Eklablog

Tous les blogs Top blogs Technologie & Science Tous les blogs Technologie & Science

Editer l'article Suivre ce blog

Administration + Créer mon blog

MENU

Tous les blogs Top blogs Technologie & Science Tous les blogs Technologie & Science

Connexion + Créer mon blog Editer l'article Suivre ce blog

Partager

17.07.2015 …

Par GloriaV

Cursor con texto

HTML

<script language='javascript' type='text/javascript'>
      //Cursor con texto en movimiento
      //<![CDATA[
      var x,y
      var tempo = 10
      var espera = 0
      var texto = "Dios es amor y humor"
      texto = texto.split("")
      var xpos = new Array()
      for (i = 0; i <= texto.length - 1; i++) {
        xpos[i] = -50
      }
      var ypos = new Array()
      for (i = 0; i <= texto.length - 1; i++) {
        ypos[i] = -50
      }
      function seguir(e){
        //si no es NS4, usa objeto window.event
        if (!e) var e = window.event
        //NS4
        if (e.pageX || e.pageY) {
          x = e.pageX
          y = e.pageY
          window.status = x + ' : ' + y
          //IE y compatibles con DOM
        } else if (e.clientX || e.clientY) {
          x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft
          y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop
          window.status = x + ' : ' + y
          //no soportado, no hace nada
        } else {
          return
        }
        espera = 1
      }
      function animar_cursor() {
        if ( espera == 1 ) {
          for ( i = texto.length - 1; i >= 1; i--) {
            xpos[i] = xpos[i-1] + tempo
            ypos[i] = ypos[i-1]
          }
          xpos[0] = x + tempo
          ypos[0] = y
        }
        //para el IE 4.x
        if ( espera==1 && document.all ) {
          for (i = 0; i <= texto.length - 1; i++) {
            var letra = eval("span" + i + ".style")
            letra.posLeft = xpos[i]
            letra.posTop = ypos[i]
          }
        }
        //para el Netscape 4.x
        else if ( espera==1 && document.layers ) {
          for (i = 0; i <= texto.length - 1; i++) {
            var letra = eval("document.span" + i)
            letra.left = xpos[i]
            letra.top = ypos[i]
          }
        }
        //para navegadores compatibles DOM
          else if ( espera==1 && document.getElementById ) {
            for (i = 0; i <= texto.length - 1; i++) {
              var letra = document.getElementById( "span" + i)
              letra.style.left = xpos[i] + 'px'
              letra.style.top = ypos[i] + 'px'
            }
          } 
        var timer = setTimeout("animar_cursor()", 30)
        }
      if (document.layers)
        document.captureEvents(Event.MOUSEMOVE)
        document.onmousemove = seguir
        //]]>
</script><style type='text/css'>
      .cursoranimado {
        position:absolute;
        visibility:visible;
        top:-50px;
        font-size:11pt;
        font-family:Arial;
        font-weight:bold;
        color:red;
      }
    </style>
<script language='javascript' type='text/javascript'>
      //<![CDATA[
      if (document.layers) {
        for (i=0;i<=texto.length-1;i++) {
          document.write('<span id="span' + i + '" class="cursoranimado">')
          document.write(texto[i])
          document.write('</span>')
        }
      } else if (document.all || document.getElementById) {
        for (i=0;i<=texto.length-1;i++) {
          document.write('<div id="span' + i + '" class="cursoranimado">')
          document.write(texto[i])
          document.write('</div>')
        }
      }
      animar_cursor()
      //]]>
</script>

« Article précédent Article suivant »

Retour à l'accueil

Partager cet article

Repost0

Commenter cet article

Voir le profil de GloriaV sur le portail Eklablog