Hacer que una capa se desplaze

floyd_23 · #1 (**permalink**) 19/02/2011, 15:22

Hola,

Mi duda es la siguiente:

Tengo una capa, y me gustaria que cuando pulsara el boton "derecha(>)" se desplazara 5px hacia la derecha. Y cuando pulsara el boton "izquierda(<)" se desplazara 5px hacia la izquierda.

Llevo todo el dia intentandolo sin exito. Aqui dejo mi codigo, a ver si me podeis ayudar en algo.

Código HTML:

<html>
<head>
	<style type="text/css">
		.capa { position: relative;
			margin: auto;
			width: 300px;
			height: 60px;
			background-color: orange;
			color: blue;
			font-family: arial;
			font-size: 12pt;
			border-style: solid;
			border-color: black;
			border-width: 2px;
		}
		.capa1 {
			position: inherit;
			margin: 0 auto;
			width: 300px;
			height: 25px;
		}
		.derecha {
			float: right;
		}
	</style>
	<script type="text/javascript">
		function cambiar(){
			var conjunto = document.getElementById("capa");
			conjunto.style.width="600px";
			conjunto.style.height="120px";
			conjunto.style.fontSize="14pt";
		}
		function volver(){
			var conjunto = document.getElementById("capa");
			conjunto.style.width="300px";
			conjunto.style.height="60px";
			conjunto.style.fontSize="12pt";
		}
		function mover(){
			var desplaza = document.getElementById("capa");
			desplaza.style.marginRight="5px"
			return desplaza;
		}
		function regreso(){
			var regresa = document.getElementById("capa");
			var posicion = document.getElementsByName("capa")
			regresa.style.marginLeft="5px"
			return posicion;
		}
		/*function desplaza (){
			var posicion = document.getElementById("capa").marginLeft;
			 alert("Su posicion es "+posicion);
			var posicionN = posicion+marginLeft=200px;
		}*/
		
	</script>
</head>
<body>
	<div id="capa" class="capa" name="capa" onmouseover="cambiar()" onmouseout="volver()">CONTENIDO DE LA CAPA</div>
	<br />
	<div id="capa1" class="capa1"><input type="button" name="izquierda" value="&lt;" onclick="regreso()" />&nbsp;<input type="button" class="derecha" name="derecha" value=">" onclick="mover()" /></div>
</body>
</html>

Hay cuatro funciones, dos de ellas son para modificar el tamaño, y las otras dos teoricamente son para que se desplaze.

Entre comentarios he puesto otra idea (que seguramente no estara muy bien desarrollada), para ver si conseguia hacer que se desplazara. La idea era almacenar su posicion en una variable, y en otra variable sumarle 5 px a esa posicion almacenada.

Espero vuestros consejos.

Saludos, gracias de antemano.

floyd_23 · #2 (**permalink**) 20/02/2011, 08:16

Bueno, ahora al menos he conseguido que me de posición(cosa que hasta ahora no me daba ningún resultado).

Tengo este codigo:

Código:

                       function cambiar (){

			var posicion = document.getElementById("capa").offsetLeft;

			 alert("Su posicion es "+posicion);
                      }

Con este código, me da la posición que ocupa la capa a partir del margen izquierdo de la pantalla(creo).
Lo que yo no se ahora, es como sumarle a esa posición una cantidad.

Lo que yo quiero conseguir es que al pulsar el botón se le sume o se le reste (según que botón pulse) 5px y que así se vaya desplazando la imagen.

A ver si alguien me puede ayudar, gracias.