旋转

注：图片旋转可兼容至ie6。其他元素旋转只能兼容至ie9+。

一、引入

<script src="js/jquery.min.js"></script>
<script src="js/jQueryRotate.js"></script>

二、使用

  • HTML结构
<div id="img"> </div>
  • 初始化
//图片旋转
$("#img").rotate(45);
//或者
$("#img").rotate({angle: 45});

//鼠标滑过旋转
$("#img").rotate({
    bind:{
        mouseover : function() {
            $(this).rotate({animateTo:180})
        },
        mouseout : function() {
            $(this).rotate({animateTo:0})
        }
    }

});

//图片无限旋转
var angle = 0;
setInterval(function(){
    angle+=3;
    $("#img").rotate(angle);
},50);					

//图片无限旋转（使用回调函数）
var rotation = function (){
    $("#img").rotate({
        angle:0,
        animateTo:360,
        callback: rotation
    });
}
rotation();

//图片无限旋转（使用回调函数并自定义easing动画）
var rotation = function (){
  $("#img").rotate({
    angle:0,
    animateTo:360,
    callback: rotation,
    easing: function (x,t,b,c,d){ // t: current time, b: begInnIng value, c: change In value, d: duration
      return c*(t/d)+b;
    }
  });
}
rotation();	

//点击图片旋转（使用jquery.easing插件）
$("#img").rotate({
  bind:
  {
    click: function(){
      $(this).rotate({ angle:0,animateTo:180,easing: $.easing.easeInOutExpo })
    }
  }
});

//点击图片旋转指定的角度
var value = 0
$("#img").rotate({
    bind:{
        click: function(){
            value +=90;
            $(this).rotate({ animateTo:value})
        }
    }
});

三、参数API

jQueryRotate.js插件集成了4个用于图片旋转的方法，分别为：

  • rotate(angle)

  • rotate(parameters)

  • getRotateAngle()

  • stopRotate()

1、rotate(angle)：简单的将图片旋转任意角度。

$("#img").rotate(45);

2、rotate(parameters)：通过配置参数来旋转图片。

parameters参数包括：

  • angle [Number] ：图片旋转角度，默认为0度。

  • bind [Object] ： 绑定事件。

  • animateTo [Number] ：图片旋转到指定的角度，默认为0。

  • center [Array] ： 定义图片旋转的中心点。

  • duration [Number] - 图片旋转的持续时间，默认为1000。

  • step [Function] ：每一步动画后执行的回调函数。

  • easing [Function] ：图片旋转的easing动画。

  • callback[Function] ：图片旋转动画结束后的回调函数。

3、getRotateAngle()：返回图片旋转的角度。

$("#img").rotate({
    angle: 45,
    bind: {
        click : function(){
            alert($(this).getRotateAngle());
        }
    }
});

4、stopRotate()：停止图片旋转动画。

$("#img").rotate({
    bind: {
        click: function(){
            $("#img").rotate({
                angle: 0,
                animateTo: 180,
                duration: 6000
            });
            setTimeout(function(){
                $("#img").stopRotate();
            }, 1000);
        }
    }
});