jQuery是一個非常流行的JavaScript庫，它可以幫助開發(fā)者更快、更簡單地操作HTML文檔、響應(yīng)用戶交互、動態(tài)操作網(wǎng)頁，并且它還可以對圖片進行一些特殊的操作，比如旋轉(zhuǎn)角度。

在使用jQuery進行圖片旋轉(zhuǎn)的時候，我們需要用到一個特別的插件—jQuery.rotate.js。這個插件可以幫助我們實現(xiàn)圖片的360度旋轉(zhuǎn)。實現(xiàn)旋轉(zhuǎn)的過程中需要將圖片轉(zhuǎn)換為canvas對象，然后處理完之后再恢復(fù)為圖片。

/*將圖片轉(zhuǎn)為canvas對象*/
function imageToCanvas(img) {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0);
return canvas;
}
/*將canvas對象恢復(fù)為圖片*/
function canvasToImage(canvas) {
var img = new Image();
img.src = canvas.toDataURL("image/png");
return img;
}
/*旋轉(zhuǎn)圖片*/
function rotateImg(img, degree) {
var canvas = imageToCanvas(img);
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
var radians = degree * Math.PI / 180;
context.rotate(radians);
context.drawImage(img, 0, 0);
return canvasToImage(canvas);
}

使用以上代碼，我們可以旋轉(zhuǎn)圖片并且可以控制旋轉(zhuǎn)的角度。當(dāng)然，如果我們想要使用自己的圖片，我們只需要將圖片的id傳入函數(shù)中就行了。

$('img').on('click', function() {
var img = $(this).get(0);
var imgWidth = img.width;
var imgHeight = img.height;
var degree = $(this).data('degree') || 0;
degree += 90;
if (degree >= 360) degree = 0;
$(this).data('degree', degree);
$(this).replaceWith(rotateImg(img, degree));
});

以上代碼是一個監(jiān)聽圖片點擊事件的jQuery代碼，我們當(dāng)點擊圖片的時候，我們就會將圖片以90度為步長旋轉(zhuǎn)，并且每完成一次旋轉(zhuǎn)后，我們會將旋轉(zhuǎn)后的新圖片替換舊圖片。

以上就是關(guān)于jQuery+照片旋轉(zhuǎn)角度的簡要介紹。希望大家可以學(xué)會如何使用jQuery對圖片進行360度的旋轉(zhuǎn)，并且開發(fā)出更加炫酷的項目！