como desplazar un div con onclick

helion · #1 (**permalink**) 14/05/2014, 11:29

hola amigos veran estoy usando este codigo para mover div con las flechas ...

Código PHP:

  <html><head>

<style type="text/css"> 

#base-map {    position:absolute;    left:0;    top:0;    width:500px;    height:320px;    z-index:1;    background-color: #CCCCCC;} 

#user-1 {position: absolute;left: 0;top: 0;width: 16px;height: 21px;z-index: 2;background-color: #006699;} 

#flec {    position:absolute;    left:514px;    top:18px;    width:103px;    height:81px;    z-index:3;} 

</style> 

<script type="text/javascript">

    function abajo(){

    var posiciony=document.getElementById("user-1").offsetTop;

    var abajo = document.getElementById("user-1").style.top=posiciony + 20;

    }

 
    function arriba(){

    var posiciony=document.getElementById("user-1").offsetTop;

    var arriba = document.getElementById("user-1").style.top=posiciony - 20;

    }

 
    function izquierda(){

    var posicionx=document.getElementById("user-1").offsetLeft;

    var izquierda = document.getElementById("user-1").style.left=posicionx  - 20;

    }

 
    function derecha(){

    var posicionx=document.getElementById("user-1").offsetLeft;

    var derecha = document.getElementById("user-1").style.left=posicionx + 20;

    }

</script>

</head>

<body>

<div id="base-map"></div> 

<div id="user-1"></div>

<table  id="flec" width="200" border="1"><tr><td>&nbsp;</td><td onClick="arriba();">arriba</td><td>&nbsp;</td></tr><tr><td onClick="izquierda();">izquierda</td><td>&nbsp;</td><td onClick="derecha();">derecha</td></tr><tr ><td>&nbsp;</td><td onClick="abajo();">abajo</td><td>&nbsp;</td></tr></table> 

</body>

</html>

todo biennnnn el unico detalle que la posicion del div cambia pero de golpe, hay alguna manera de que el traslado sea por medio de una transicion (a que valla avanzando de apocos hasta llegar al punto) y claro que la funcion sea igual como la que grafique osea avance 20 en 20?

espero me puedan ayudar muchas gracias

PHPeros · #2 (**permalink**) 14/05/2014, 12:20

Lo mejor será hacerlo con animaciones de CSS3.

Italico76 · #3 (**permalink**) 14/05/2014, 13:29

Las transiciones se facilitan con jQuery

http://api.jquery.com/animate/
http://www.javascriptkit.com/dhtmltu...d-jquery.shtml

< hay demos en la segunda

helion · #4 (**permalink**) 14/05/2014, 14:31

Cita:

Iniciado por Italico76

Las transiciones se facilitan con jQuery

http://api.jquery.com/animate/
http://www.javascriptkit.com/dhtmltu...d-jquery.shtml

< hay demos en la segunda

muchas gracias Italico :D con tu ayuda y esos ejemplos pude realizarlo

dejo el codigo si a alguien mas le sirve :)

Código PHP:

  <style>  

div {

    position: absolute;

    left: 45px;

    top: 109px;

    background-color: #bca;

    width: 42px;

    border: 1px solid green;

}  

</style>

    

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 

<button id="go">&raquo; Run</button>

<div id="block">Hello!</div>

 

<script>

$( "#go" ).click(function() {

  $( "#block" ).animate({

    left: "80",

  }, 1500 );

});

</script>