Gracias por visitar www.lewebmonster.com :) Los artículos publicados en este blog son completamente originales. La mayoría de los mismos contienen ejemplos o archivos que pueden descargarse para mayor comodidad del visitante (usted); el único requisito para realizar descargas es estar registrado (el registro es completamente gratis y no se le va a enviar ningún tipo de publicidad a su correo electrónico). Si desea colaborar con el crecimiento de este blog, por favor, de un Like en la parte superior derecha de esta página. Gracias!

VN:F [1.9.22_1171]
Rating: 3.7/5 (3 votes cast)

Ya desde varios días atrás venía desarrollando y publicando ejemplos sin utilizar plugins. En esta entrada voy a mostrarles como rotar imágenes con jQuery, haciendo uso del plugin jQueryRotate. Para echarle un ojo a toda la documentación, ejemplos y demás cosas relacionadas con este plugin visite el sitio oficial del proyecto en http://code.google.com/p/jqueryrotate/.

El plugin jQueryRotate tiene algunas opciones interesantes para rotar imágenes con o sin animaciones. Por ejemplo, si tenemos un diseño en el que cierta imagen debe ir con una rotación específica, podemos utilizarlo; es decir, el plugin jQueryRotate no es únicamente para animaciones (nosotros si vamos a hacer una animación sencilla para rotar un disco).

Ejemplo para rotar imágenes con jQuery

El ejemplo en vivo lo puden ver desde este enlace. Los usuarios registrados pueden descargar el ejemplo completo al final de la página (en la sección Enlaces) o haciendo clic aquí.

Haga clic en la siguiente imagen para ver el ejemplo de rotación de imágenes con jQuery.

Al colocar el puntero del ratón sobre el item de la lista vamos a animar la imagen con una rotación de 360 grados, y al retirarlo la devolveremos a su posición original. También, vamos a animar otra lista que se encuentra oculta. Al principio mi idea era colocar un disco de música con la lista de canciones, pero al final me decidí por usar la carátula de Ubuntu. Me parece que para un sitio de música el efecto quedaría atractivo ;).

Código completo para rotar imágenes con jQuery

En los siguientes tres bloques tienen el código del ejemplo para rotar imágenes con jQuery. En el sitio web oficial del plugin jQueryRotate tenemos a disposición la documentación y algunos ejemplos útiles.

Código HTML para rotar una imagen con jQuery

<!DOCTYPE html>
<html>
	<head>
		<title>Ejemplo para rotar elementos con jQuery - www.lewebmonster.com</title>
		<link rel="stylesheet" type="text/css" href="css/rotar.css">
	</head>
	<body>
		<div id="divContenedor">
			<h1>Rotar elementos con jQuery</h1>
			<p>Ejemplo por Cali Rojas - <a href="http://www.lewebmonster.com">www.lewebmonster.com</a></p>
			<ul class="clsDiscos">
				<li>
					<h2>Ubuntu 9.04 Jaunty Jackalope</h2>
					<img src="img/disco.png" alt="">
					<ol>
						<li>Linux kernel 2.6.28-11.37</li>
						<li>X.Org server 1.6</li>
						<li>Soporte del sistema de archivos Ext4</li>
						<li>GNOME 2.26 / KDE 4.2</li>
						<li>Mejoras en la interfaz</li>
						<li>Nuevas aplicaciones</li>
						<li>Un Ubuntu m&aacute;s r&aacute;pido</li>
					</ol>
				</li>
			</ul>
		</div>
		<script type="text/javascript" src="js/ext/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/ext/jQueryRotateCompressed.2.2.js"></script>
		<script type="text/javascript" src="js/rotar.js"></script>
	</body>
</html>

Código CSS para rotación de imágenes con jQuery

*{
	padding: 0;
	margin: 0;
}
body{
	font: normal 12px Tahoma, Verdana, Arial, sans-serif;
	background: #AE905A;
	color: #fff;
}
h1{
	font-size: 19px;
}
h2{
	text-align: center;
	padding: 5px 0;
	font-size: 12px;
	text-transform: uppercase;
	color: #000;
	text-shadow: 1px 1px 1px #888;
}
#divContenedor{
	margin: 0 auto;
	width: 500px;
	text-align: center;
	padding-top: 20px;
}
	ul{
		list-style-type: none;
		padding-top: 20px;
	}
		ul>li{
			display: inline-block;
			background: #fff;
			margin: 10px;
			width: 256px;
			padding: 10px;
			border: solid 1px #444;
			border-radius: 5px;
			box-shadow: 0 0 10px #222;
			position: relative;
			top: 0;
		}
			ul>li img{
				height: 256px;
				width: 256px;
			}
			ul>li ol{
				display: none;
				padding: 20px;
				margin-left: 10px;
			}
				ul>li ol li{
					color: #000;
					text-shadow: 1px 1px 1px #ccc;
					text-align: left;
				}

Código JavaScript para rotar una imagen con jQuery

$(function(){
	//evento al colocar el puntero del raton sobre el elemento de la lista
	$('ul.clsDiscos li').hover(function(){
		//obtenemos la instancia del elemento
		var $objItem=$(this);
		//buscamosla imagen y la rotamos 360 grados
		$objItem.find('img').stop(true,true).rotate({
			animateTo: 360
		});
		//buscamos la etiqueta ol y la deslizamos hacia abajo
		$objItem.find('ol').stop(true,true).slideDown();
	}, //evento al retirar el raton del elemento
	function(){
		//obtenemos la instancia del elemento sobre el que esta el raton
		var $objItem=$(this);
		//buscamos la lista (ol) y la deslizamos hacia arriba
		$objItem.find('ol').stop(true,true).slideUp('fast');
		//rotamos la imagen a 0 (cero) grados
		$objItem.find('img').stop(true,true).rotate({
			animateTo: 0
		});
	});
});

Fin de la rotación :P

Este es uno de los post más pequeños que he creado, pero espero que de igual forma les pueda servir de algo. La implementación de efectos con rotación no es nada de otro mundo cuando tenemos a mano plugins como jQueryRotate.

Enlaces

Escrito por Cali Rojas

Cali Rojas

Senior Front-End/Back-End Web Developer y diseñador de GUI’s, nacido en Costa Rica. Utilizo tecnologías como JavaScript Orientado a Objetos, HTML5, CSS3 y jQuery; MySQL, PHP, Python, LESS, SASS, etc. Linuxero por elección (Debian). Autor de jsmConsole (JavaScript Mobile Console) y Mopix.js (Mobile Pixel Perfect). Fundador de este blog.

VN:F [1.9.22_1171]
Rating: 3.7/5 (3 votes cast)
VN:F [1.9.22_1171]
Rating: +1 (from 3 votes)
Rotar imágenes con jQuery y el plugin jQueryRotate, 3.7 out of 5 based on 3 ratings

Compartir este artículo

Si le pareció interesante el contenido de este artículo, por favor, compártalo con sus amigos y conocidos por medio de las principales redes sociales.

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Artículos relacionados

Categorías: jQuery

3 comentarios hasta el momento. Haga clic aquí para ver u ocultar los comentarios.

  1. obe82 dice:

    Buenas, hace poco que he descubierto tu blog y queria felicitarte por ello. Es genial y me ayuda mucho a la hora de realizar mis webs. Un saludo.

  2. kgarcia dice:

    Gracias por la inf. Me ha servido de mucho Saludos…

Deje un comentario

Su información personal no será compartida con otros sitios y/o personas.