6/17/2013

Cursor de letras en movimiento

Diseño  Edición HTLM  Antes de </head> pega el siguiente codigo:

<script language='javascript' type='text/javascript'>//Cursor con texto en movimiento//<![CDATA[var x,yvar tempo = 10var espera = 0var texto = "Texto que quieres colocar"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.eventif (!e) var e = window.event//NS4if (e.pageX || e.pageY) {x = e.pageXy = e.pageYwindow.status = x + ' : ' + y//IE y compatibles con DOM} else if (e.clientX || e.clientY) {x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLefty = e.clientY + document.body.scrollTop + document.documentElement.scrollTopwindow.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] + tempoypos[i] = ypos[i-1]}xpos[0] = x + tempoypos[0] = y}//para el IE 4.xif ( 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.xelse 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 DOMelse 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>

Ahora cambia "Texto que quieres colocar" por tu palabra y/o frase y ¡listo! 
Si tienes alguna duda, comenta ;) 

2 comentarios:

Sweet Candy dijo...

Me afilias? Soy de kawai editions Toma los botoncitos o solo uno muchas gracias. Mandame tu boton :)

Sweet Candy dijo...

Hola, Vi el blog pero... No puedo comentar en las planyilla de blogskin casi nucna tienen comentario tenemos que buscar un tutorial para como poner comentarios sino, nadie estara activo, contestame gracias. peke