jquery+jquery.rotate实现图片旋转效果

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