Возможность поворачивать изображения у нас есть благодаря существованию 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>
Сначала хотел сделать отдельную страницу с примерами этого чудо-плагина, но перечитав всю статьи заново, понял, что всё и так понятно.
Комментарии
Нет комментариев к данной статье.
Комментарии