首先要下载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）图片旋转不同角度
