Tema: Cambiar coordenadas de un div
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 27/05/2014, 17:54
VFF
 
Fecha de Ingreso: mayo-2014
Mensajes: 4
Antigüedad: 10 años, 8 meses
Puntos: 0
Respuesta: Cambiar coordenadas de un div
Cita:
Iniciado por Italico76 Ver Mensaje
Algo asi... quizas ?

Código Javascript: 
Ver original
  1. <html>
  2. <head>
  3. <title>No molestar!</title>
  4. <style>
  5.     body {background-color: #000;}  
  6.     
  7.     h1 {color: white;}
  8.  
  9.    #moverDiv
  10.    {
  11.         width:350px;
  12.         height:350px;
  13.         background-image: url("http://oi54.tinypic.com/28k3pjo.jpg");
  14.         border: red 2px;
  15.         position:relative;
  16.    }
  17. </style>
  18. </head>
  19. <body>
  20. <h1> No me molestes </h1>
  21.  
  22. <div id = "moverDiv"></div>
  23.  
  24. <script>
  25.     // @author: Pablo Bozzolo
  26.     
  27.     function moveMeHor(elem,cant,smooth)
  28.     {
  29.         smooth = smooth || false;
  30.         
  31.         elem.removeEventListener('mouseover',miHandler,false);
  32.         
  33.         if (!smooth){
  34.             elem.style.left = cant;
  35.             return; 
  36.         }   
  37.     
  38.         (function(){            
  39.             
  40.             i = 0;
  41.             inter = setInterval(function()
  42.             {   
  43.                 if (i==cant)
  44.                 {               
  45.                     clearInterval(inter);
  46.                     i = 0;
  47.                     //div.addEventListener ('mouseover',miHandler,false);
  48.                 }   
  49.                 
  50.                 if (i>cant)
  51.                 {               
  52.                     clearInterval(inter);
  53.                     i=0;
  54.                     elem.removeEventListener('mouseover',miHandler,false);
  55.                 }
  56.                 
  57.                 elem.style.left = i;
  58.                 console.log(i);
  59.                 i++;
  60.                 
  61.             },1);
  62.         })();   
  63.         
  64.         
  65.     }
  66.         
  67.     window.onload = function()
  68.     {   
  69.         div = document.getElementById('moverDiv');  
  70.  
  71.         miHandler = function(){moveMeHor(div,500,true);};   
  72.     
  73.         // espero un tiempito segundo antes de registrar el mouseover   
  74.         setInterval(function(){
  75.             div.addEventListener ('mouseover',miHandler,false);
  76.         },500);
  77.     }
  78.         
  79. </script>
  80. </body>
  81. </html>

Si a moveMeHor() le quitas el tercer parametro (que es opcional) o le colocas false, se mueve de una vez.

PD: alquien (quizas Alexis88) sabe porque no funciona en [URL="http://jsfiddle.net/boctulus/gdgLD/5/"]jsFiddle[/URL] ?


Voy a comprobarlo, muchas gracias por tu atención!