Jquery图片向左向右旋转

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