首先要下载jquery.min.js 和jquery.rotate.js文件
1、下载地址：
https://www.jb51.net/jiaoben/554113.html
2、导入文件
<script type="text/javascript" src="../js/jquery-2.1.4.js" ></script>
<script type="text/javascript" src="../js/jQueryRotate.js"></script>
3、html界面
<body>
<div>
<h4>示例一：鼠标滑过旋转图片</h4>
<img id="img1" src="../imgs/safari.png" />
</div>
<br/>
<div>
<h4>示例二：图片无限旋转</h4>
<img id="img2" src="../imgs/safari.png" />
</div>
<br/>
<div>
<h4>示例三：点击图片旋转</h4>
<img id="img3" src="../imgs/safari.png" />
</div>
<br/>
<div>
<h4>示例四：旋转不同角度图片</h4>
<img id="img4" src="../imgs/sunset.jpg" width="180" height="150"/> <br/><br/><br/>
<input type="button" value="顺时针旋转90度" onClick="ImgRotate(0)"/> <br/><br/>
<input type="button" value="逆时针旋转90度" onClick="ImgRotate(1)"/> <br/><br/>
<input type="button" value="顺时针旋转180度" onClick="ImgRotate(2)"/><br/><br/>
<input type="button" value="顺时针旋转270度" onClick="ImgRotate(3)"/><br/><br/>
</div> </body>
4、js脚本
<script>
$(function(){ //示例三：点击图片旋转角度（这段js放在示例一后面没有效果，暂不知原因）
var value = 0;
$("#img3").rotate({
bind:
{
click: function(){
value +=90;
$(this).rotate({ animateTo:value})
}
}
}); //示例一: 鼠标滑过旋转图片
$("#img1").rotate({
bind:{
mouseover : function() {
$(this).rotate({animateTo:180});
},
mouseout : function() {
$(this).rotate({animateTo:0});
}
}
}); //示例二：图片无限旋转
var angle = 0;
setInterval(function(){
angle+=3;
$("#img2").rotate(angle);
},10);
}); //示例四：图片旋转不同角度
var ImgRotate = function(i){
switch(i)
{
case 0:
$('#img4').rotate(90);
break;
case 1:
$('#img4').rotate(-90);
break;
case 2:
$('#img4').rotate(180);
break;
case 3:
$('#img4').rotate(270);
break;
}
} </script>
5、实现的效果
1）鼠标滑过旋转图片
2）图片无限旋转
3）点击图片旋转
4）图片旋转不同角度
