Cambiar coordenadas de un div

VFF · #1 (**permalink**) 26/05/2014, 15:27

Hola buenas! Soy nuevo en esto de javascript y tengo muchas dudas. Me he leido la típica guía práctica pero que no me dice lo que quiero hacer en este mismo instante.

Imagino que será muy sencillo pero aquí va:

Quiero mover la posición (coordenadas) de un div cuando pase por encima con el ratón.

Como creo esta líneas de código? Me estoy liando mucho y definitivamente necesito ayuda!

Muchas gracias de antemano!

Albuss · #2 (**permalink**) 26/05/2014, 15:30

muestra un poco de tu codigo, solo un poco aunque sea, si no va a ser dificil.

VFF · #3 (**permalink**) 26/05/2014, 15:57

Cita:

Iniciado por Albuss

muestra un poco de tu codigo, solo un poco aunque sea, si no va a ser dificil.

Sería absolutamente desde cero.

simplemente que si =

<div id = "moverDiv"></div>

Está en la coordenada 0 de X. Al pasar el ratón por encima se desplace a la coordenada 500. ( Interpolación de movimiento suavizado?)

Estoy hecho un lio completamente :(

No sé como crear esta función.

Gracias de antemano

Albuss · #4 (**permalink**) 26/05/2014, 16:22

a ver, tienes que estudiar el DOM, como acceder mediante JS y utilizarlo para aplicar cambios y stilos con CSS.

empieza desde aqui : http://librosweb.es/javascript/capitulo_5.html

VFF · #5 (**permalink**) 26/05/2014, 16:39

Cita:

Iniciado por Albuss

a ver, tienes que estudiar el DOM, como acceder mediante JS y utilizarlo para aplicar cambios y stilos con CSS.

empieza desde aqui : [url]http://librosweb.es/javascript/capitulo_5.html[/url]

Muchas gracias, voy a ojearlo!

Italico76 · #6 (**permalink**) 26/05/2014, 19:38

Algo asi... quizas ?

Código Javascript:

Ver original<html>
<head>
<title>No molestar!</title>
<style>
    body {background-color: #000;}  
    
    h1 {color: white;}
 
   #moverDiv
   {
        width:350px;
        height:350px;
        background-image: url("http://oi54.tinypic.com/28k3pjo.jpg");
        border: red 2px;
        position:relative;
   }
</style>
</head>
<body>
<h1> No me molestes </h1>
 
<div id = "moverDiv"></div>
 
<script>
    // @author: Pablo Bozzolo
    
    function moveMeHor(elem,cant,smooth)
    {
        smooth = smooth || false;
        
        elem.removeEventListener('mouseover',miHandler,false);
        
        if (!smooth){
            elem.style.left = cant;
            return; 
        }   
    
        (function(){            
            
            i = 0;
            inter = setInterval(function()
            {   
                if (i==cant)
                {               
                    clearInterval(inter);
                    i = 0;
                    //div.addEventListener ('mouseover',miHandler,false);
                }   
                
                if (i>cant)
                {               
                    clearInterval(inter);
                    i=0;
                    elem.removeEventListener('mouseover',miHandler,false);
                }
                
                elem.style.left = i;
                console.log(i);
                i++;
                
            },1);
        })();   
        
        
    }
        
    window.onload = function()
    {   
        div = document.getElementById('moverDiv');  
 
        miHandler = function(){moveMeHor(div,500,true);};   
    
        // espero un tiempito segundo antes de registrar el mouseover   
        setInterval(function(){
            div.addEventListener ('mouseover',miHandler,false);
        },500);
    }
        
</script>
</body>
</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 jsFiddle ?

VFF · #7 (**permalink**) 27/05/2014, 17:54

Cita:

Iniciado por Italico76

Algo asi... quizas ?

Código Javascript:

Ver original<html>
<head>
<title>No molestar!</title>
<style>
    body {background-color: #000;}  
    
    h1 {color: white;}
 
   #moverDiv
   {
        width:350px;
        height:350px;
        background-image: url("http://oi54.tinypic.com/28k3pjo.jpg");
        border: red 2px;
        position:relative;
   }
</style>
</head>
<body>
<h1> No me molestes </h1>
 
<div id = "moverDiv"></div>
 
<script>
    // @author: Pablo Bozzolo
    
    function moveMeHor(elem,cant,smooth)
    {
        smooth = smooth || false;
        
        elem.removeEventListener('mouseover',miHandler,false);
        
        if (!smooth){
            elem.style.left = cant;
            return; 
        }   
    
        (function(){            
            
            i = 0;
            inter = setInterval(function()
            {   
                if (i==cant)
                {               
                    clearInterval(inter);
                    i = 0;
                    //div.addEventListener ('mouseover',miHandler,false);
                }   
                
                if (i>cant)
                {               
                    clearInterval(inter);
                    i=0;
                    elem.removeEventListener('mouseover',miHandler,false);
                }
                
                elem.style.left = i;
                console.log(i);
                i++;
                
            },1);
        })();   
        
        
    }
        
    window.onload = function()
    {   
        div = document.getElementById('moverDiv');  
 
        miHandler = function(){moveMeHor(div,500,true);};   
    
        // espero un tiempito segundo antes de registrar el mouseover   
        setInterval(function(){
            div.addEventListener ('mouseover',miHandler,false);
        },500);
    }
        
</script>
</body>
</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!