前端实现图片快速反转替换_js实现图片旋转的三种方法

1 使用jQueryRotate.js实现

示例代码：

#div1 {

width: 800px;

height: 600px;

background-color: #ff0;

position: absolute;

}

.imgRotate {

width: 100px;

height: 80px;

position: absolute;

top: 50%;

left: 50%;

margin: -40px 0 0 -50px;

}

var num = 0;

$("#input2").click(function(){

num ++;

$("#img1").rotate(90*num);

});

测试结果：chrome下效果正常，旋转后img对象仍为img对象；ie8下效果正常，但旋转后img对象变为下面对象，由于对象变化，若旋转后仍按原来方法获取img对象，则会报js错误。欲获取image对象，可根据class获取。如果图像旋转后，不进行其它操作，则可用此方法。若进行其它操作，如放大、缩小图像，则此方法实现较复杂。

2 使用Microsoft提供的Matrix对象

示例代码：