Como girar una capa al mover el ratón con JQuery, Código fuente
Siguiendo con la formación en JQuery, en este código he implementado que una capa se gire al mover el ratón, de manera que cualquier movimiento del ratón haga girar en el sentido del reloj la capa elegida.
El código es una ampliación del anterior ejemplo de saber la posición del ratón en JQuery, estáis invitados a visionar este ejemplo. De todas maneras el código creo que no necesita de mucha explicación. Primero creamos un estilo para la capa “defensa” y otro añadido con los diferentes parámetros tal y como viene comentado para los diferentes navegadores (aún no hay un estandar… supongo que tardará, si es que algún día llega…
El texto que se muestra dentro de la capa “Lo que será el cañón” es por que ya empiezo a vislumbrar algún uso con esto que veremos en posteriores artículos, pero con esto se me ocurre realizar algún juego en el que tendremos un “cañón” y tendremos que defender nuestra base… pero por partes que está muy verde, vamos al código jquery:
<!DOCTYPE html>
<html>
<head>
<title>Girar una capa con el movimiento del ratón. Código fuente JQuery</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<style>
/* Estilo de la capa que va a girar */
.defensa {
background: #F02311;
color: #FFF;
width: 200px;
height: 200px;
text-align: center;
font: normal 1em Arial;
position: relative;
top: 50%;
left: 50%;
}/* CSS que dependerá del navegador, así que utiliza diferentes parámetros */
.defensa {
-webkit-transform: rotate(45deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(45deg); /* Firefox 3.5-15 */
-ms-transform: rotate(45deg); /* IE 9 */
-o-transform: rotate(45deg); /* Opera 10.50-12.00 */
transform: rotate(45deg); /* Firefox 16+, IE 10+, Opera 12.10+ */
}
</style>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script><script type=”text/javascript”>
/* Función JQuery que toma las coordenadas del ratón dentro del documento y las muestra en la capa Coordenadas*/
$(document).ready(function() {
$(document).mousemove(function(e){
$(‘#txtCoordenadas’).html(“Pos x : ” + e.pageX + ” | Pos y : ” + e.pageY);
RotaCapa();
});
});/* Función JQuery para rotar una capa*/
var rotation = 0;
function RotaCapa() {
rotation += 5;
$(‘.defensa’).css({‘-webkit-transform’ : ‘rotate(‘+ rotation +’deg)’,
‘-moz-transform’ : ‘rotate(‘+ rotation +’deg)’,
‘-ms-transform’ : ‘rotate(‘+ rotation +’deg)’,
‘transform’ : ‘rotate(‘+ rotation +’deg)’});
};</script>
</head>
<body>
<div id=”txtCoordenadas”></div>
<div class=”defensa”>
<h1>Futura imagen del cañón</h1>
</div></body>
</html>
En las funciones de JQuery creo que queda bastante claro, a destacar que desde la función de mover el ratón actualizo coordenadas y las muestro y llamo a la función RotaCapa() para que realice el giro dependiendo del navegador, lanzo a la propiedad el total de la variable rotation que va en incremento de 5.
Os dejo un ejemplo de como girar una capa con el movimiento del ratón
