585 Создание jQuery плагина — это достаточно простое занятие. Если вы создаете плагин в первый раз, то вам кажется, что будут сложности с изучением и пониманием новой платформы, но только не в jQuery. Подробная документация, распространенность и хорошая поддержка, как разработчиков, так и других программистов, достаточны для быстрого создания простого плагина.
И сегодня мы создадим простой jQuery плагин вращения изображения с помощью курсора мыши.
Добавляем следующий JS код в файл jquery.rotate.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
(function( $ ) { $.fn.myrotate = function() { var img = this.find("img"); var imgpos = img.position(); var x0, y0; $(window).load(function() { img.removeAttr("width"); img.removeAttr("height"); x0 = imgpos.left + (img.width() / 2); y0 = imgpos.top + (img.height() / 2); }); var x, y, x1, y1, drag = 0; img.css({ "cursor": "pointer", "position": "relative" }); img.mousemove(function(e) { x1 = e.pageX; y1 = e.pageY; x = x1 - x0; y = y1 - y0; r = 360 - ((180/Math.PI) * Math.atan2(y,x)); if (drag == 1) { img.css("transform","rotate(-"+r+"deg)"); img.css("-moz-transform","rotate(-"+r+"deg)"); img.css("-webkit-transform","rotate(-"+r+"deg)"); img.css("-o-transform","rotate(-"+r+"deg)"); } }); img.mousedown(function() { if (drag == 0) { drag = 1; img.css("-webkit-box-shadow", "0 0 5px #999"); img.css("-moz-box-shadow", "0 0 5px #999"); img.css("box-shadow", "0 0 5px #999"); } else { drag = 0; img.css("-webkit-box-shadow", "0 0 2px #999"); img.css("-moz-box-shadow", "0 0 2px #999"); img.css("box-shadow", "0 0 2px #999"); } }); img.mouseleave(function() { drag = 0; }); }; })( jQuery ); |
Идея скрипта состоит в том, что сначала получаем координаты центровой точки изображения, далее координаты курсора мыши. Используя JS Math, находим радиан и далее поворачиваем изображение с помощью CSS.
Вот как должен выглядеть HTML код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="jquery-1.6.4.min.js"></script> <script src="jquery.rotate.js"></script> <script> $(function() { $("#content").myrotate(); $("#circle").myrotate(); }); </script> </head> <body> <div id="container"> <div id="content"> <img src="img.jpg"/> </div> <div id="circle"> <img src="img.jpg"/> </div> </div> </body> </html> |
Вот и все. Правда есть некоторые проблема получения ширины и высоты изображения в браузерах на webkit. На есть описание ее решения.
