Вращение изображений через плагин jQuery Rotate

Разместил: Al-Sher
Опубликовано: 25 июля 2015

Данный плагин позволяет поворачивать картинки на нужный угол как статично, так и при наведении курсора. Также позволяет бесконечно вращать картинку Для начала посмотрите ДЕМО Установка: 1#: После /head вставляйте:

<script type="text/javascript" src="/js/jqueryrotate.2.1.js"></script>  
<script type="text/javascript">  
jQuery(document).ready(function() {  
// Функция статичного поворота на 45 градусов  
jQuery("#rotate1").rotate(45);  
// Постоянное вращение картинки  
var angle = 0;  
setInterval(function(){  
angle+=3;  
jQuery("#rotate2").rotate(angle);  
},50);  
// Поворот при наведении курсора на 180 градусов  
jQuery("#rotate3").rotate({ 
bind: 
{ 
mouseover : function() { 
$(this).rotate({animateTo:180})  
},  
mouseout : function() { 
$(this).rotate({animateTo:0})  
}  
} 
});  
});  
</script>

jQuery(document).ready(function() {

// Функция статичного поворота на 45 градусов

jQuery("#rotate1").rotate(45);

// Постоянное вращение картинки

var angle = 0;

setInterval(function(){

angle+=3;

jQuery("#rotate2").rotate(angle);

},50);

// Поворот при наведении курсора на 180 градусов

jQuery("#rotate3").rotate({

bind:

{

mouseover : function() {

$(this).rotate({animateTo:180})

mouseout : function() {

$(this).rotate({animateTo:0})

}

});

</script>

2#: В любое место вставляем картинки:

<img src="Ссылка на картинку" width="160" height="160" alt="" id="rotate1" />  
<img src="Ссылка на картинку" width="160" height="160" alt="" id="rotate2" />  
<img src="Ссылка на картинку" width="160" height="160" alt="" id="rotate3" />

JS файл из прикреплённого архива залейте в папку js Источник: http://www.xiper.net

Автор публикации

не в сети 3 месяца

Al-Sher

Комментарии: 47Публикации: 59Регистрация: 13-06-2015

Метки: jQuery Rotate Вращение Изображения

Вам может также понравиться...

0 Комментарий

Старые

Межтекстовые Отзывы

Посмотреть все комментарии

Всевидящее око

Новый комментарий от пользователя Эдуард: «Забыл добавить. Снег появляется то в футере (когда ставил перед закрывающим тегом body), то наоборот почему-то в самом верху (причем сам блог сдвигался вниз), когда ставил его после открывающего тега, как было указано в статье.» в материале Приятный Новогодний снежок на HTML5 Canvas

2024-12-29 16:26:03

VVL99

Всех с новым годом!

2025-01-02 17:46:18

Всевидящее око

Новый комментарий от пользователя Acıbadem su kaçak tespiti: «Acıbadem su kaçak tespiti Kadıköy su kaçağı tespiti: Kadıköy’deki su sızıntılarında noktasal tespit için yanınızdayız. https://www.grand-indonesia.com/author/kacak/» в материале Фон из анимированных самолётов на CSS3

2025-01-02 18:25:49

Всевидящее око

Новый комментарий от пользователя elavil for anxiety reviews: «elavil for anxiety reviews

elavil for anxiety reviews» в материале Крутой анимированный индикатор загрузки в виде снежка на CSS3

2025-01-03 19:51:39

Всевидящее око

Новый комментарий от пользователя how long can you take elavil: «how long can you take elavil

how long can you take elavil» в материале След за курсором из частиц на HTML5 Canvas

2025-01-05 15:00:13

stalker1313

Привет. Может кто-нибудь знает почему не получается зайти на сайт playstation через vpn и как это исправить? Без vpn захожу на сайт, но не могу зарегать акк.
Ошибка:
Страница недоступна
Сайт playstation.com не отправил данных.
ERR_EMPTY_RESPONSE

2025-01-08 18:00:15

Al-Sher

@stalker1313, Привет. Возможно впн блочит их сайт. Попробовал со своим личным впном - сайт открывается

2025-01-08 19:56:24

stalker1313

@Al-Sher, бесплатный, хороший vpn посоветуете?

2025-01-08 22:01:35

stalker1313

Можно как-то сохранить все статьи с сайта wp в отдельные вордовские документы?

2025-01-09 19:50:03

Al-Sher

@stalker1313, Увы, я уже давно пользуюсь только личным впн на своей впске)

2025-01-10 20:41:42

......

Для публикации сообщений в чате необходимо авторизоваться