Saber la posición exacta de un elemento mediante position() jquery
position() es una función de jquery que nos devolverá mediante un número las coordenadas x("top") e y("left") del elemento seleccionado, este número hace referencia a píxeles.
En el siguiente ejemplo puedes ver como mediante Jquery se puede obtener la posición, por ejemplo de un div ...
Pulsa el siguiente botón para ver el posicionamiento de la caja ...
El código es el siguiente ...
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(":button#boton").click(function() {
$("#caja").animate({left: "+=100", top: "+=250"}, 3000, function(){
$("#caja").html("LEFT: " + $("#caja").position().left + " TOP: " + $("#caja").position().top);
});
$("#caja").animate({left: "-=100", top: "-=250"}, 3000, function(){
$("#caja").html("LEFT: " + $("#caja").position().left + " TOP: " + $("#caja").position().top);
});
});
});
</script>
</head>
<body>
<input type="button" id="boton" value="Position()">
<div id="caja" style="background-color: black; width: 150px; height: 60px; position: relative; color: white;"></div>
</body>
</html>
No hay comentarios:
Publicar un comentario