讓圖片旋轉(zhuǎn)任意角度及JQuery插件使用介紹

更新時間：2013年03月20日 15:18:24 投稿：whsnow

圖片旋轉(zhuǎn)任意角度在某些應用中時很有必要的，現(xiàn)在有一款JQuery插件可以辦得到，接下來為大家介紹下使用方法，感興趣的朋友可以參考下哈，希望對你有所幫助

引入下方的jquery.rotate.js文件，然后通過$("選擇器").rotate(角度);可以旋轉(zhuǎn)任意角度，
例如$("#rotate-image").rotate(45);把這句放在$(document).ready(function(){ });中
就是將id為rotate-image的圖片旋轉(zhuǎn)45度。

另外可以更方便的通過調(diào)用$("選擇器").rotateRight()和$("選擇器").rotateLeft()來分別向右旋轉(zhuǎn)90度和向左旋轉(zhuǎn)90度。

jquery.rotate.js:

復制代碼代碼如下:

jQuery.fn.rotate = function(angle,whence) {
var p = this.get(0);
// we store the angle inside the image tag for persistence
if (!whence) {
p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
} else {
p.angle = angle;
}
if (p.angle >= 0) {
var rotation = Math.PI * p.angle / 180;
} else {
var rotation = Math.PI * (360+p.angle) / 180;
}
var costheta = Math.round(Math.cos(rotation) * 1000) / 1000;
var sintheta = Math.round(Math.sin(rotation) * 1000) / 1000;
//alert(costheta+","+sintheta);
if (document.all && !window.opera) {
var canvas = document.createElement('img');
canvas.src = p.src;
canvas.height = p.height;
canvas.width = p.width;
canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
} else {
var canvas = document.createElement('canvas');
if (!p.oImage) {
canvas.oImage = new Image();
canvas.oImage.src = p.src;
} else {
canvas.oImage = p.oImage;
}
canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);
canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);
var context = canvas.getContext('2d');
context.save();
if (rotation <= Math.PI/2) {
context.translate(sintheta*canvas.oImage.height,0);
} else if (rotation <= Math.PI) {
context.translate(canvas.width,-costheta*canvas.oImage.height);
} else if (rotation <= 1.5*Math.PI) {
context.translate(-costheta*canvas.oImage.width,canvas.height);
} else {
context.translate(0,-sintheta*canvas.oImage.width);
}
context.rotate(rotation);
context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
context.restore();
}
canvas.id = p.id;
canvas.angle = p.angle;
p.parentNode.replaceChild(canvas, p);
}
jQuery.fn.rotateRight = function(angle) {
this.rotate(angle==undefined?90:angle);
}
jQuery.fn.rotateLeft = function(angle) {
this.rotate(angle==undefined?-90:-angle);
}

jQuery.fn和jQuery.prototype區(qū)別介紹
jQuery.fn和jQuery.prototype想必大家對它并不陌生吧，那么你們知道它們之間的區(qū)別嗎？在本文有個不錯的示例大家可以參考下
2013-10-10
jQuery提示效果代碼分享
這里給大家分享幾段JQuery提示效果的代碼，非常的簡單實用，有需要的小伙伴直接拿走吧
2014-11-11
jQuery Password Validation密碼驗證
這篇文章主要介紹了jQuery Password Validation密碼驗證的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
jquery無法設置checkbox選中即沒有變成選中狀態(tài)
設置以后checkbox并沒有變成選中狀態(tài)，用chrome調(diào)試看了一下，checkbox中確實有checked屬性，針對這個問題，大家可以參考下本文
2014-03-03
jQuery拋物線運動實現(xiàn)方法(附完整demo源碼下載)
這篇文章主要介紹了jQuery拋物線運動實現(xiàn)方法,以完整實例形式分析了jQuery物體運動的實現(xiàn)技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下
2016-01-01
html文件中jquery與velocity變量中的$沖突的解決方法
在使用velocity模版引擎的環(huán)境下，使用jquery時其中$與velocity變量中的$沖突，下面有個不錯的解決方法，感興趣的朋友可以參考下
2013-11-11
JQuery從頭學起第三講
看了前面兩講的54淘客網(wǎng)友，我想應該對JQuery已經(jīng)有了個初步的認識，知道如何用JQuery選擇器來獲取控件的值，今天我們主要講使用JQuery對常用控件的取值。
2010-07-07
jQuery延遲加載圖片插件Lazy Load使用指南
在頁面上圖片比較多的時候，打開一張頁面必然引起與服務器大數(shù)據(jù)量的交互。尤其是對于高清晰的圖片，占了幾百K的空間。那么我們?nèi)绾尾拍芨淖冞@種狀況呢，這就是今天我們要探討的問題了。
2015-03-03
jQuery在iframe中無法彈出對話框的解決方法
如果在iframe中使用則彈不出對話框，而有時候我們還必須得使用iframe而不能用jQuery的load方式，下面有個不錯的處理方法，希望對大家有所幫助
2014-01-01
jQuery實現(xiàn)帶右側(cè)索引功能的通訊錄示例【附源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)帶右側(cè)索引功能的通訊錄,結合實例形式分析了jQuery針對頁面元素動態(tài)遍歷、排序等相關操作技巧,并附源碼供讀者下載參考,需要的朋友可以參考下
2018-04-04