{"id":67,"date":"2015-10-19T13:53:11","date_gmt":"2015-10-19T05:53:11","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=67"},"modified":"2017-10-11T10:36:39","modified_gmt":"2017-10-11T02:36:39","slug":"%e5%8e%9f%e7%94%9fjavascriptjquery%e6%8e%a7%e5%88%b6%e5%9b%be%e7%89%87%e6%97%8b%e8%bd%ac%e8%87%aa%e5%ae%9a%e4%b9%89%e8%a7%92%e5%ba%a6","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=67","title":{"rendered":"(\u8f6c)\u539f\u751fJavaScript+Jquery\u63a7\u5236\u56fe\u7247\u65cb\u8f6c\u81ea\u5b9a\u4e49\u89d2\u5ea6"},"content":{"rendered":"<div class=\"blog-abstract\">\u6458\u8981: \u5bf9\u4e8e\u7528\u7ba1\u4e86CS3\u7684\u77e9\u9635\u53d8\u5316\uff0c\u7a81\u7136\u6709\u4e00\u5929\u9879\u76ee\u8981\u6c42\u517c\u5bb9IE9\u56de\u8fc7\u5934\u53d1\u73b0\uff0cIE9\u4ee5\u81f3\u4e8eIE9-\u4ee5\u4e0b\u90fd\u4e0d\u517c\u5bb9\uff0c\u4e8e\u662f\u5c31\u6536\u96c6\u4e86\u4e00\u4e9b\u6587\u7ae0\uff0c\u4e00\u8d77\u5b66\u4e60\u4e00\u4e0b<\/div>\n<div id=\"blogBody\" class=\"blog-body\">\n<div class=\"BlogContent\">\n<pre class=\"hljs javascript\"><code class=\"language-javascript hljs\">    jQuery.fn.rotate = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">angle,whence<\/span>) <\/span>{  \r\n        <span class=\"hljs-keyword\">var<\/span> p = <span class=\"hljs-keyword\">this<\/span>.get(<span class=\"hljs-number\">0<\/span>);  \r\n      \r\n        <span class=\"hljs-comment\">\/\/ we store the angle inside the image tag for persistence  <\/span>\r\n        <span class=\"hljs-keyword\">if<\/span> (!whence) {  \r\n            p.angle = ((p.angle==<span class=\"hljs-literal\">undefined<\/span>?<span class=\"hljs-number\">0<\/span>:p.angle) + angle) % <span class=\"hljs-number\">360<\/span>;  \r\n        } <span class=\"hljs-keyword\">else<\/span> {  \r\n            p.angle = angle;  \r\n        }  \r\n      \r\n        <span class=\"hljs-keyword\">if<\/span> (p.angle &gt;= <span class=\"hljs-number\">0<\/span>) {  \r\n            <span class=\"hljs-keyword\">var<\/span> rotation = <span class=\"hljs-built_in\">Math<\/span>.PI * p.angle \/ <span class=\"hljs-number\">180<\/span>;  \r\n        } <span class=\"hljs-keyword\">else<\/span> {  \r\n            <span class=\"hljs-keyword\">var<\/span> rotation = <span class=\"hljs-built_in\">Math<\/span>.PI * (<span class=\"hljs-number\">360<\/span>+p.angle) \/ <span class=\"hljs-number\">180<\/span>;  \r\n        }  \r\n        <span class=\"hljs-keyword\">var<\/span> costheta = <span class=\"hljs-built_in\">Math<\/span>.round(<span class=\"hljs-built_in\">Math<\/span>.cos(rotation) * <span class=\"hljs-number\">1000<\/span>) \/ <span class=\"hljs-number\">1000<\/span>;  \r\n        <span class=\"hljs-keyword\">var<\/span> sintheta = <span class=\"hljs-built_in\">Math<\/span>.round(<span class=\"hljs-built_in\">Math<\/span>.sin(rotation) * <span class=\"hljs-number\">1000<\/span>) \/ <span class=\"hljs-number\">1000<\/span>;  \r\n        <span class=\"hljs-comment\">\/\/alert(costheta+\",\"+sintheta);  <\/span>\r\n       \r\n        <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-built_in\">document<\/span>.all &amp;&amp; !<span class=\"hljs-built_in\">window<\/span>.opera) {  \r\n            <span class=\"hljs-keyword\">var<\/span> canvas = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'img'<\/span>);  \r\n      \r\n            canvas.src = p.src;  \r\n            canvas.height = p.height;  \r\n            canvas.width = p.width;  \r\n      \r\n            canvas.style.filter = <span class=\"hljs-string\">\"progid:DXImageTransform.Microsoft.Matrix(M11=\"<\/span>+costheta+<span class=\"hljs-string\">\",M12=\"<\/span>+(-sintheta)+<span class=\"hljs-string\">\",M21=\"<\/span>+sintheta+<span class=\"hljs-string\">\",M22=\"<\/span>+costheta+<span class=\"hljs-string\">\",SizingMethod='auto expand')\"<\/span>;  \r\n        } <span class=\"hljs-keyword\">else<\/span> {  \r\n            <span class=\"hljs-keyword\">var<\/span> canvas = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'canvas'<\/span>);  \r\n            <span class=\"hljs-keyword\">if<\/span> (!p.oImage) {  \r\n                canvas.oImage = <span class=\"hljs-keyword\">new<\/span> Image();  \r\n                canvas.oImage.src = p.src;  \r\n            } <span class=\"hljs-keyword\">else<\/span> {  \r\n                canvas.oImage = p.oImage;  \r\n            }  \r\n      \r\n            canvas.style.width = canvas.width = <span class=\"hljs-built_in\">Math<\/span>.abs(costheta*canvas.oImage.width) + <span class=\"hljs-built_in\">Math<\/span>.abs(sintheta*canvas.oImage.height);  \r\n            canvas.style.height = canvas.height = <span class=\"hljs-built_in\">Math<\/span>.abs(costheta*canvas.oImage.height) + <span class=\"hljs-built_in\">Math<\/span>.abs(sintheta*canvas.oImage.width);  \r\n      \r\n            <span class=\"hljs-keyword\">var<\/span> context = canvas.getContext(<span class=\"hljs-string\">'2d'<\/span>);  \r\n            context.save();  \r\n            <span class=\"hljs-keyword\">if<\/span> (rotation &lt;= <span class=\"hljs-built_in\">Math<\/span>.PI\/<span class=\"hljs-number\">2<\/span>) {  \r\n                context.translate(sintheta*canvas.oImage.height,<span class=\"hljs-number\">0<\/span>);  \r\n            } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (rotation &lt;= <span class=\"hljs-built_in\">Math<\/span>.PI) {  \r\n                context.translate(canvas.width,-costheta*canvas.oImage.height);  \r\n            } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (rotation &lt;= <span class=\"hljs-number\">1.5<\/span>*<span class=\"hljs-built_in\">Math<\/span>.PI) {  \r\n                context.translate(-costheta*canvas.oImage.width,canvas.height);  \r\n            } <span class=\"hljs-keyword\">else<\/span> {  \r\n                context.translate(<span class=\"hljs-number\">0<\/span>,-sintheta*canvas.oImage.width);  \r\n            }  \r\n            context.rotate(rotation);  \r\n            context.drawImage(canvas.oImage, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, canvas.oImage.width, canvas.oImage.height);  \r\n            context.restore();  \r\n        }  \r\n        canvas.id = p.id;  \r\n        canvas.angle = p.angle;  \r\n        p.parentNode.replaceChild(canvas, p);  \r\n    }  \r\n      \r\n    jQuery.fn.rotateRight = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">angle<\/span>) <\/span>{  \r\n        <span class=\"hljs-keyword\">this<\/span>.rotate(angle==<span class=\"hljs-literal\">undefined<\/span>?<span class=\"hljs-number\">90<\/span>:angle);  \r\n    }  \r\n      \r\n    jQuery.fn.rotateLeft = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">angle<\/span>) <\/span>{  \r\n        <span class=\"hljs-keyword\">this<\/span>.rotate(angle==<span class=\"hljs-literal\">undefined<\/span>?<span class=\"hljs-number\">-90<\/span>:-angle);  \r\n    }  <\/code><\/pre>\n<p>\u4e00\u5c0f\u6bb5\u4ee3\u7801\u5c01\u88c5\u4e86\u4e00\u4e2arotate()\u51fd\u6570\uff0c\u5728$(&#8220;\u9009\u62e9\u5668\u540d\u79f0&#8221;).rotate(\u8ddf\u4e0a\u4f60\u60f3\u8981\u65cb\u8f6c\u7684\u89d2\u5ea6);<\/p>\n<p>\u6ce8\u610f\u8fd9\u91cc\u6709\u51e0\u4e2a\u5c0f\u95ee\u9898\u4e0d\u652f\u6301 \uff1a<\/p>\n<p>1.\u5728\u5c01\u88c5\u524d\u4e00\u5b9a\u8981\u5f15\u7528Jquery\uff0c\u5426\u8005\u4e0d\u597d\u610f\u601d\u4e0d\u751f\u6548\uff0c<\/p>\n<p>2. \u4e00\u5b9a\u8981\u653e\u5728<strong>$(document).ready(function(){ });<\/strong>\u4e2d \uff0c\u4e0d\u7136\u5728<strong>Chrome<\/strong>\u4e2d\u4e0d\u663e\u793a( \u6ca1\u6cd5\u83b7\u53d6\u56fe\u7247\u7684\u957f\u5bbd )<\/p>\n<p>3. \u8fd9\u4e2a\u6548\u679c\u53ea\u80fd\u6267\u884c\u4e00\u6b21\uff0c\u4f60\u4f1a\u60f3\u95ee\u4ec0\u4e48\u53ea\u80fd\u4e00\u6b21\uff1f\u8fd9\u4e0d\u662f\u5751\u7239\u4e48\uff01\uff01<\/p>\n<p>\u5f53\u4f60\u60f3\u8fdb\u884c\u7b2c\u4e8c\u6b21\u6267\u884c\u65f6\u5019\u4f60\u53d1\u73b0\u4ed6\u7adf\u7136\u53d8\u6210\u4e86&#8221; \u753b\u5e03 &#8220;\uff0c\u6210\u4e86\u753b\u5e03\u5c31\u6ca1\u6cd5\u641e\u4e86<\/p>\n<p>4.IE6-8\u4e0d\u652f\u6301<\/p>\n<p>\u8c22\u8c22<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u6458\u8981: \u5bf9\u4e8e\u7528\u7ba1\u4e86CS3\u7684\u77e9\u9635\u53d8\u5316\uff0c\u7a81\u7136\u6709\u4e00\u5929\u9879\u76ee\u8981\u6c42\u517c\u5bb9IE9\u56de\u8fc7\u5934\u53d1\u73b0\uff0cIE9\u4ee5\u81f3\u4e8eIE9-\u4ee5\u4e0b\u90fd\u4e0d\u517c\u5bb9\uff0c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/67"}],"collection":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=67"}],"version-history":[{"count":2,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/67\/revisions"}],"predecessor-version":[{"id":330,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/67\/revisions\/330"}],"wp:attachment":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=67"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=67"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=67"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}