Foros del Web » Programando para Internet » Javascript »

como desplazar un div con onclick

Estas en el tema de como desplazar un div con onclick en el foro de Javascript en Foros del Web. hola amigos veran estoy usando este codigo para mover div con las flechas ... Código PHP: < html >< head > < style type = "text/css" ...
  #1 (permalink)  
Antiguo 14/05/2014, 11:29
 
Fecha de Ingreso: mayo-2010
Mensajes: 215
Antigüedad: 8 años, 5 meses
Puntos: 4
Pregunta como desplazar un div con onclick

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

  #2 (permalink)  
Antiguo 14/05/2014, 12:20
Avatar de PHPeros
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 5 años, 1 mes
Puntos: 578
Respuesta: como desplazar un div con onclick

Lo mejor será hacerlo con animaciones de CSS3.
  #3 (permalink)  
Antiguo 14/05/2014, 13:29
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 11 años, 6 meses
Puntos: 290
Respuesta: como desplazar un div con onclick

Las transiciones se facilitan con jQuery

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

< hay demos en la segunda
__________________
Salu2!
  #4 (permalink)  
Antiguo 14/05/2014, 14:31
 
Fecha de Ingreso: mayo-2010
Mensajes: 215
Antigüedad: 8 años, 5 meses
Puntos: 4
Respuesta: como desplazar un div con onclick

Cita:
Iniciado por Italico76 Ver Mensaje
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 {
    
positionabsolute;
    
left45px;
    
top109px;
    
background-color#bca;
    
width42px;
    
border1px 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> 

Etiquetas: desplazar, funcion, html, onclick
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 16:46.