Вращение изображения — jQuery
Сегодня мы научимся с вами вращать изображение вокруг своей оси с помощью технологии jquery. Технологии не стоят на месте, а всего пару лет назад я бы покрутил у виска, если бы вы попросили меня сделать подобное на вашем сайте.
Более того, просто бесконечно крутить изображение не круто. Мы усложним задачу: картинка будет крутиться только, если вы будете водить курсором мыши. Интересно? Тогда поехали.
Для начала нужно определиться с инструментами. Первое, что подберем - это картинку, которую будем вращать. Мне по душе вот эта:
Теперь определим, какой скрипт будем использовать для вращения. Есть много готовых jquery плагинов. Я подобрал вот этот: jQueryRotate.
И, самое последнее, напишем небольшой исполняющий скрипт, который будет объединять в себе все плагины и выполнять наши условия (а если помните, главное из которых - вращать объект только при движении курсора мыши).
var angle = 0; setInterval(function(){ angle+=1; },10); $('.wrapper').mousemove(function(e){ $("#image").rotate(angle); });
Немного разберем, что тут написано. Задана переменная angle, которой присвоен начальный угол поворота нашей картинки - 0. Потом мы говорим, что нужно увеличивать этот угол на 1 градус (angle+=1;), каждый момент времени. Момент времени в данном случае это 10 миллисекунд.
Ну и, самое главное, это вращай элемент с id image когда курсор мыши двигается по блоку с классом wrapper. Вот вроде и все. Ничего сложного. Оцените в действии:
Полный код страницы:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <title>Вращение изображения</title> <style> .wrapper { height:1000px; } </style> </head> <body> <div class="wrapper"> <script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script> <img src="https://www.google.com/images/srpr/logo1w.png" id="image"> <script> var angle = 0; setInterval(function(){ angle+=1; },10); $('.wrapper').mousemove(function(e){ $("#image").rotate(angle); }); </script> </div> </body> </html>
Для тех, кому нужно просто всегда вращать изображение
Просто используйте этот скрипт, взамен предыдущего:
var angle = 0; setInterval(function(){ angle+=1; $("#image").rotate(angle); },10);