Поворот изображения (картинки) на jQuery
Хотим предложить Вам для обзора очень полезный плагин для вращения картинок - jQueryRotate. Скачать данный плагин Вы можете с нашего сайта по ссылке jQueryRotate.2.2.js.
Данный плагин позволит Вам реализовать на своем сайте поворот изображения (картинки) на заданный угол. При необходимости можно задать динамическое вращение любому изображению (картинке) на сайте.
Для наглядного примера работы плагина jQueryRotate обратите внимание на три изображения, находящееся чуть ниже:
Как видите, первое и третье изображения при загрузке автоматически было повернуты на 45 градусов. Второе, при наведении на него курсора мышки, поворачивается на 90 градусов. А четвертое постоянно вращается по часовой стрелке.
Для работы плагина, реализующего поворот изображений, Вам потребуется подключить библиотеку jQuery следующим образом:
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>И сам плагин jQueryRotate:
<script type="text/javascript" src="js/jQueryRotateCompressed.2.2.js">
</script>Картинки, к которым Вы планируете применить поворот или динамическое вращение, следует описывать следующим образом:
<img src="image/img_1.png" height="125" width="300" alt="" class="rotate1">
<img src="image/img_2.png" height="125" width="300" alt="" id="rotate2">
<img src="image/img_3.png" height="125" width="300" alt="" class="rotate1">
<img src="image/img_4.png" height="125" width="300" alt="" id="rotate3">После того, как нужные Вам изображения добавлены и им присвоены нужные id или class, можно добавлять и сам скрипт, который будет осуществлять поворот изображений (картинок) в соответствии с заданными параметрами.
<script type="text/javascript">
$(document).ready(function(){
jQuery(".rotate1").rotate(45);
jQuery("#rotate2").rotate({ bind:{
mouseover:function(){ $(this).rotate({animateTo: 90}) },
mouseout:function(){ $(this).rotate({animateTo: 0}) }
}});
var angle = 0;
setInterval(function(){
angle += 3;
jQuery("#rotate3").rotate(angle);
}, 90);
});
</script>Как Вы видите, можно обращаться к картинкам по их id, а можно применять вращение сразу и к целому классу. Для того чтобы повернуть изображение против часовой стрелки, достаточно указать отрицательное значение.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Для примера №2 нужно добавить параметр duration, например, rotate({animateTo: 90,duration: 3000}).