14/05/2014, 11:29
|
| | | Fecha de Ingreso: mayo-2010
Mensajes: 215
Antigüedad: 14 años, 7 meses Puntos: 4 | |
 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> </td><td onClick="arriba();">arriba</td><td> </td></tr><tr><td onClick="izquierda();">izquierda</td><td> </td><td onClick="derecha();">derecha</td></tr><tr ><td> </td><td onClick="abajo();">abajo</td><td> </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 
|