Publicentral.com - alta en buscadores, registro buscadores, promocionaPromocion en buscadores y negocios online
Mostrando Codigo - Javascript
Code

Javascript - Efecto de colorido alrededor del mouse

Códigos Javascript

El codigo muestra un bonito efecto de colores volando alrededor del mouse. Debemos modificar las lineas 2,3 y 4 con los colores que queremos mostrar y la linea 5 para modificar el tamaño. El codigo debe estar insertado entre las cabeceras de nuestra pagina
Visitas: 20,721 - 19/05/2004 23:01:31
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. <SCRIPT LANGUAGE="JavaScript">
  2. var a_Colour='fff000';
  3. var b_Colour='00ff00';
  4. var c_Colour='ff00ff';
  5. var Size=120;
  6. var YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0;step=0.6;
  7. if (document.layers){
  8. window.captureEvents(Event.MOUSEMOVE);
  9. function nsMouse(evnt){
  10. xpos = window.pageYOffset+evnt.pageX+6;
  11. ypos = window.pageYOffset+evnt.pageY+16;
  12. }
  13. window.onMouseMove = nsMouse;
  14. }
  15. else if (document.all)
  16. {
  17. function ieMouse(){
  18. xpos = document.body.scrollLeft+event.x+6;
  19. ypos = document.body.scrollTop+event.y+16;
  20. }
  21. document.onmousemove = ieMouse;
  22. }
  23.  
  24. function swirl(){
  25. for (i = 0; i < 3; i++)
  26.  {
  27.  YDummy[i]=ypos+Size*Math.sin((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);
  28.  XDummy[i]=xpos+Size*Math.cos((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);
  29.  }
  30. ThisStep+=step;
  31. setTimeout('swirl()',10);
  32. }
  33. var amount=10;
  34. if (document.layers){
  35. for (i = 0; i < amount; i++)
  36. {
  37. document.write('<layer name=nsa'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+a_Colour+'></layer>');
  38. document.write('<layer name=nsb'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+b_Colour+'></layer>');
  39. document.write('<layer name=nsc'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+c_Colour+'></layer>');
  40. }
  41. }
  42. else if (document.all){
  43. document.write('<div id="ODiv" style="position:absolute;top:0px;left:0px">'
  44. +'<div id="IDiv" style="position:relative">');
  45. for (i = 0; i < amount; i++)
  46. {
  47. document.write('<div id=x style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+a_Colour+';font-size:'+i/2+'"></div>');
  48. document.write('<div id=y style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+b_Colour+';font-size:'+i/2+'"></div>');
  49. document.write('<div id=z style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+c_Colour+';font-size:'+i/2+'"></div>');
  50. }
  51. document.write('</div></div>');
  52. }
  53. function prepos(){
  54. var ntscp=document.layers;
  55. var msie=document.all;
  56. if (document.layers){
  57. for (i = 0; i < amount; i++)
  58. {
  59.  if (i < amount-1)
  60.  {
  61.  ntscp['nsa'+i].top=ntscp['nsa'+(i+1)].top;ntscp['nsa'+i].left=ntscp['nsa'+(i+1)].left;
  62.  ntscp['nsb'+i].top=ntscp['nsb'+(i+1)].top;ntscp['nsb'+i].left=ntscp['nsb'+(i+1)].left;
  63.  ntscp['nsc'+i].top=ntscp['nsc'+(i+1)].top;ntscp['nsc'+i].left=ntscp['nsc'+(i+1)].left;
  64.  }
  65. else  
  66.  {
  67.  ntscp['nsa'+i].top=YDummy[0];ntscp['nsa'+i].left=XDummy[0];
  68.  ntscp['nsb'+i].top=YDummy[1];ntscp['nsb'+i].left=XDummy[1];
  69.  ntscp['nsc'+i].top=YDummy[2];ntscp['nsc'+i].left=XDummy[2];
  70.  }
  71. }
  72. }
  73. else if (document.all){
  74. for (i = 0; i <  amount; i++)
  75. {
  76.  if (i < amount-1)
  77.  {
  78.  msie.x[i].style.top=msie.x[i+1].style.top;msie.x[i].style.left=msie.x[i+1].style.left;
  79.  msie.y[i].style.top=msie.y[i+1].style.top;msie.y[i].style.left=msie.y[i+1].style.left;
  80.  msie.z[i].style.top=msie.z[i+1].style.top;msie.z[i].style.left=msie.z[i+1].style.left;
  81.  }
  82. else
  83.  {
  84.  msie.x[i].style.top=YDummy[0];msie.x[i].style.left=XDummy[0];
  85.  msie.y[i].style.top=YDummy[1];msie.y[i].style.left=XDummy[1];
  86.  msie.z[i].style.top=YDummy[2];msie.z[i].style.left=XDummy[2];
  87.  }
  88. }
  89. }
  90. setTimeout("prepos()",10);
  91. }
  92. function Start(){
  93. swirl(),prepos()
  94.  
  95. }
  96. window.onload=Start;
  97. </SCRIPT>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Efecto de colorido alrededor del mouse" href="http://www.tutores.org/codigo/1106/" target="_blank">Efecto de colorido alrededor del mouse</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
21/05/2004 21.58.16
2 5
Me genera dos errores, que crees que pueda estar suceder
Comentario usuario
19/04/2003
5 5
hola fburgosr
En la demo funciona correctamente, que errores te da??
pd. Ya esta agregado ecuador en la lista de paises.
Comentario usuario
20-05-2010 17:52:04
1 5
A mi no me funciona en mi pagina hosteada en webs.com :(
Comentario usuario
Kazhy
5 5
A mi tampoco me funciona, simplemente no sale al índice. Es más, ni siquiera sé de lo que se trata este cursor porque no pusieron ejemplo alguno.
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.