\u753b\u50cf\u3092\u56de\u8ee2\u3055\u305b\u308bjQuery\u3067\u3059\u3002\u7c21\u5358\u306b\u753b\u50cf\u3092\u56de\u8ee2\u3055\u305b\u308b\u4e8b\u304c\u51fa\u6765\u307e\u3059\u3002
\n\u4ee3\u8868\u7684\u306a\uff15\u30d1\u30bf\u30fc\u30f3\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<\/p>\n
\u4eca\u56de\u4f7f\u7528\u3057\u305f\u300cjquery.min.js<\/b>\uff1aver2.0.3\u300d\u3068\u300cjQueryRotate.js<\/b>\uff1aVer2.3\u300d\u3067\u3059\u3002
\n<\/p>\n
\u2193\u4ee5\u4e0b\u304c\u5b9f\u969b\u306e\u30bd\u30fc\u30b9\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n
\u25bcJavaScript<\/p>\n
<script type=\"text\/javascript\" src=\"js\/jquery.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/jQueryRotate.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n$(function(){\r\n\t\/\/mission1\r\n\t$(\"#Neko1 figure img\").rotate({angle:45});\r\n\t\r\n\t\/\/mission2\r\n\tvar angle = 0;\r\n\tsetInterval(function(){\r\n\t\t\t\tangle+=3;\r\n\t\t\t $(\"#Neko2 figure img\").rotate(angle);\r\n\t},40);\r\n\t\r\n\t\/\/mission3\r\n\tvar Neko3 = function (){\r\n\t\t $(\"#Neko3 figure img\").rotate({\r\n\t\t\t\tangle: 0, \r\n\t\t\t\tanimateTo: -360, \r\n\t\t\t\tcallback: Neko3\r\n\t\t });\r\n\t}\r\n\tNeko3();\r\n\t\r\n\t\/\/mission4\r\n\t$(\"#Neko4 figure img\").rotate({ \r\n\t\tbind: \r\n\t\t\t{ \r\n\t\t\t\tclick: function(){\r\n\t\t\t\t\t$(this).rotate({\r\n\t\t\t\t\t\tangle: 0,\r\n\t\t\t\t\t\tanimateTo: 360,\r\n\t\t\t\t\t\teasing: $.easing.easeInOutExpo\r\n\t\t\t\t\t})\r\n\t\t\t\t}\r\n\t\t\t} \r\n\t});\r\n\t\r\n\t\/\/mission5\r\n\t$(\"#Neko5 figure img\").rotate({ \r\n\tbind: \r\n\t\t{ \r\n\t\t\tmouseover : function() { \r\n\t\t\t\t$(this).rotate({\r\n\t\t\t\t\tanimateTo: 360\r\n\t\t\t\t})\r\n\t\t\t},\r\n\t\t\tmouseout : function() { \r\n\t\t\t\t$(this).rotate({\r\n\t\t\t\t\tanimateTo: 0\r\n\t\t\t\t})\r\n\t\t\t}\r\n\t\t} \t \r\n\t});\r\n\t\r\n});\r\n<\/script>\r\n<\/pre>\n\u25bcCSS<\/p>\n
<style type=\"text\/css\">\r\n.cfix:after {\r\n content: \".\";\r\n display: block;\r\n height: 0;\r\n clear: both;\r\n visibility: hidden;\r\n}\r\n \r\n.cfix {\r\n display: inline-table;\r\n min-height: 1%;\r\n}\r\n \r\n\/* Hides from IE-mac *\/\r\n* html .cfix {\r\n height: 1%;\r\n}\r\n.cfix {\r\n display: block;\r\n}\r\n\/* End hide from IE-mac *\/\r\n\r\nbody {\r\n\tfont-family: \"\u30d2\u30e9\u30ae\u30ce\u89d2\u30b4 Pro W3\", \"Hiragino Kaku Gothic Pro\", \"\u30e1\u30a4\u30ea\u30aa\", Meiryo, Osaka, \"\uff2d\uff33 \uff30\u30b4\u30b7\u30c3\u30af\", \"MS PGothic\", sans-serif;\r\n\tfont-size: 12px;\r\n}\r\n\r\nh1,h2,h3 {\r\n\tline-height: 1.2;\r\n}\r\n\r\n#wrap {\r\n\twidth: 960px;\r\n\toverflow: hidden;\r\n\tmargin: 0 auto;\r\n}\r\nimg{\r\n\twidth:250px;\r\n\theight:250px;\r\n}\r\n#neko{\r\ndisplay:block;\r\nmargin-left:auto;\r\nmargin-right:auto;\r\n}\r\n#header {\r\n\tmargin-bottom: 50px;\r\n\tborder-bottom: 2px dotted #ccc;\r\n}\r\n\r\n#header h1 {\r\n\tpadding: 50px 0;\r\n\ttext-align: center;\r\n\tfont-size: 60px;\r\n\tfont-family: 'Gudea', sans-serif;\r\n}\r\n\r\n#header h1 span {\r\n\tdisplay: inline-block;\r\n\tpadding: 5px 3px;\r\n\tfont-size: 16px;\r\n\tfont-family: \"\u30d2\u30e9\u30ae\u30ce\u89d2\u30b4 Pro W3\", \"Hiragino Kaku Gothic Pro\", \"\u30e1\u30a4\u30ea\u30aa\", Meiryo, Osaka, \"\uff2d\uff33 \uff30\u30b4\u30b7\u30c3\u30af\", \"MS PGothic\", sans-serif;\r\n\tbackground: #FF0;\t\r\n}\r\n\r\n#wrap {\r\n\twidth: 990px;\r\n}\r\n\r\n.Demonstration {\r\n\tfloat: left;\r\n\twidth: 300px;\r\n\tpadding-bottom: 40px;\r\n\tmargin: 0 30px 40px 0;\r\n\tborder-bottom: 2px dotted #c8c8c8;\r\n}\r\n\r\n.Demonstration h1 {\r\n\ttext-align:center;\r\n\tmargin-bottom: 40px;\r\n\tfont-size: 36px;\r\n\tfont-family: 'Gudea', sans-serif;\r\n}\r\n\r\n.Demonstration h1 span {\r\n\tdisplay: inline-block;\r\n\tpadding: 5px 3px;\r\n\tfont-size: 16px;\r\n\tfont-family: \"\u30d2\u30e9\u30ae\u30ce\u89d2\u30b4 Pro W3\", \"Hiragino Kaku Gothic Pro\", \"\u30e1\u30a4\u30ea\u30aa\", Meiryo, Osaka, \"\uff2d\uff33 \uff30\u30b4\u30b7\u30c3\u30af\", \"MS PGothic\", sans-serif;\r\n\tbackground: #FF0;\r\n}\r\n\r\n.Demonstration figure {\r\n\ttext-align: center;\r\n}\r\n\r\n.Demonstration#Neko4 figure img,.Demonstration#Neko5 figure img {\r\n\tcursor: pointer;\r\n}\r\n\r\n#footer #copyright {\r\n\tpadding: 0 0 30px;\r\n}\r\n\r\n<\/style>\r\n<\/pre>\n\u25bcHTML<\/p>\n
<div id=\"wrap\">\r\n <div id=\"header\">\r\n <h1>jQueryRotate.js<br \/><span>\u732b\u3092\u50be\u3051\u3066jQueryRotate.js\u3092\u5b8c\u5168\u30de\u30b9\u30bf\u30fc\u3057\u3088\u3046\u7de8<\/span><\/h1>\r\n\t<img id=\"neko\" src=\"images\/neko.gif\" alt=\"\u306d\u3053\">\r\n <\/div>\r\n <div id=\"wrap\" class=\"cfix\">\r\n <div class=\"Demonstration\" id=\"Neko1\">\r\n <h1>Demonstration 1<Br \/><span>\u732b\u309245\u00b0\u50be\u3051\u3066\u307f\u308b<\/span><\/h1>\r\n <figure><img src=\"images\/neko.gif\" title=\"\u307f\u3088\u3001\u306d\u3053\u50be\u304f\"><\/figure>\r\n <\/div>\r\n <div class=\"Demonstration\" id=\"Neko2\">\r\n <h1>Demonstration 2<Br \/><span>\u732b\u3092\u56de\u3057\u7d9a\u3051\u3066\u307f\u308b<\/span><\/h1>\r\n <figure><img src=\"images\/neko.gif\" title=\"\u307f\u3088\u3001\u306d\u3053\u56de\u308b\"><\/figure>\r\n <\/div>\r\n <div class=\"Demonstration\" id=\"Neko3\">\r\n <h1>Demonstration 3<Br \/><span>\u732b\u3092\u56de\u3057\u3066\u6b62\u3081\u3066\u3092\u7e70\u308a\u8fd4\u3057\u3066\u307f\u308b<\/span><\/h1>\r\n <figure><img src=\"images\/neko.gif\" title=\"\u306d\u3053\u3001\u904a\u3070\u308c\u3068\u308b\u3067\"><\/figure>\r\n <\/div>\r\n <div class=\"Demonstration\" id=\"Neko4\">\r\n <h1>Demonstration 4<Br \/><span>\u732b\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u56de\u3059<\/span><\/h1>\r\n <figure><img src=\"images\/neko.gif\" title=\"\u4e00\u56de\u307e\u308f\u3063\u3066\u306b\u3083\u3093\u3084\"><\/figure>\r\n <\/div>\r\n <div class=\"Demonstration\" id=\"Neko5\">\r\n <h1>Demonstration 5<Br \/><span>\u732b\u3092\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3067\u56de\u3059<\/span><\/h1>\r\n <figure><img src=\"images\/neko.gif\" title=\"\u3082\u3046\u4e00\u56de\u307e\u308f\u3063\u3066\u304a\u624b\uff01\"><\/figure>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n\u4eca\u56de\u3001\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u306e\u306f\u3001
\n\u300e\u3044\u308d\u3093\u306a\u753b\u50cf\u3092\u30af\u30eb\u30c3\u30af\u30eb\u30af\u30eb\u30c3\u30af\u30eb\u56de\u3059\u30a4\u30b1\u30a4\u30b1jQuery\u30d7\u30e9\u30b0\u30a4\u30f3 \u300cjQueryRotate\u300d<\/a>\u300f\u3055\u3093\u3067\u3059\u3002
\n\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002<\/p>\n