Поворот картинки с помощью jQuery

Опубликовано
Комментарии Нет

Возможность поворачивать изображения у нас есть благодаря существованию jQuery и дополнительному плагину jqueryrotate.

Могу сказать с некоторой увереностью, что этот плагин корректно работает в большинстве браузеров. В современных версиях работает 100% и только в Opera под Linux есть незначительные лаги. В более старых версиях начиная от IE 6 и Firefox 2.0 плагин также отлично работает. И это огроменный плюс в его пользу.

Что нам нужно для поворота изображений?

Для этого нам нужно подключить к своему сайту библиотеку jQuery и плагин jqueryrotate:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jqueryrotate.2.1.js"></script>

Перед этим необходимо поместить плагин jqueryrotate в директорию /js вашего сайта.

Непосредственно сам поворот

Плагин jqueryrotate позволяет:

  • повернуть картинку на определенный угол;
  • красиво, с анимацией поворачивать картинку, так сказать в онлайн режиме.

Анимированный поворот можно посадить на событие, к примеру, на наведение курсора мыши и получить эффект отзывчивости от картинки.

С самого начала нам нужно выделить то изображение, к которому будем применять эффект поворота – присваиваем ему идентификатор rotateimg:

<img src="/images/img.jpg" alt="" id="rotateimg" />

Вот несколько типовых примеров, с помощью которых можно добиться требуемого эффекта:

Повернуть изображение на угол в 12 градусов:

<script type="text/javascript">
	jQuery(document).ready(function() {
	    jQuery("#rotateimg").rotate({angle:12});
	});
</script>

Постоянно вращать изображение:

<script type="text/javascript">
	var angle = 0;
	setInterval(function(){
	      angle+=3;
	     jQuery("#rotateimg").rotate(angle);
	},60);
</script>

Поворот изображения при наведении на него мышки:

<script type="text/javascript">
	jQuery("#rotateImg").rotate({ 
	   bind: 
	     { 
	        mouseover : function() { 
	            jQuery(this).rotate({animateTo:15})
	        },
	        mouseout : function() { 
	            jQuery(this).rotate({animateTo:0})
	        }
	     } 
	});
<script>

Сначала хотел сделать отдельную страницу с примерами этого чудо-плагина, но перечитав всю статьи заново, понял, что всё и так понятно.

Автор

Комментарии

Нет комментариев к данной статье.

Комментарии

Поля обозначенные как * требуются обязательно. Перед постингом всегда делайте просмотр своего комментария.





← Старые Новые →