html：

<div id="windowImgZoomIn" class="easyui-window" title="圖片預覽" data-options="modal:true,closed:true,minimizable: false,maximizable: false,collapsible: false" style="width: 80%; height: 90%; padding: 3px; text-align: center;">

<div>

<div class="menuBox">

<div class="RotateLeft menu mleft zoom_left">

<img src="/Static/images/Undo.png" />

向左轉

</div>

<div class="RotateRight menu mright zoom_right">

向右轉

<img src="/Static/images/Redo.png" />

</div>

</div>

</div>

<div id="windowImgZoomIn_img" style="width: 100%; height: 100%;">

<img />(這裡是動態載入的img圖片)（最好一個img用一個li包住，在點選旋轉時，img會轉成canvas，但是 被li包住的img沒有轉成canvas）

</div>

<div id="windowImgZoomIn_icon">

<img class='fd_zoomimg_prev' src='Static/images/prev.png' style='position: absolute; left: 0; top: 50%; cursor: pointer;' />

<img class='fd_zoomimg_next' src='Static/images/next.png' style='position: absolute; right: 0; top: 50%; cursor: pointer;' />

</div>

<div id="windowImgZoomIn_info" style="position: absolute; bottom: 5px; width: 100%;">

<div id="windowImgZoomIn_info_num" style="width: 50px; height: 25px; line-height: 25px; background-color: rgba(120, 120, 120, 0.5); border-radius: 14px; margin: 0 auto; text-align: center; color: #fff;">

</div>

</div>

</div>

css：

.menuBox {

display: block; margin: 3px auto; height: 22px; width: 150px; position: absolute; right: 10px; top: 35px; z-index: 999;

}

.menuBox .menu {

width: 65px;

border: 1px solid #a2a2a2;

float: left;

font-size: 12px;

vertical-align: middle;

height: 17px;

line-height: 17px;

position: static;

border-color: #ddd;

color: #444;

}

.menuBox .mleft {

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

padding-right: 5px;

text-align: right;

}

.menuBox .mright {

border-left: 0;

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

padding-left: 5px;

text-align: left;

}

.menuBox .menu:hover {

background-color: #dedede;

cursor: pointer;

}

.menuBox .menu img {

vertical-align: middle;

}

js：

$(function () {

//圖片旋轉

$(".zoom_left").click(function () {

var Angle = -90;

var idx_jzzp = idx;

var curimg = $("#idx_" + idx_jzzp);

curimg.rotate(Angle);

});

$(".zoom_right").click(function () {

var Angle = 90;

var idx_jzzp = idx;

var curimg = $("#idx_" + idx_jzzp);

curimg.rotate(Angle);

});

})

網址：http://www.cnblogs.com/cc11001100/p/6354234.html