jquery-rotate图片旋转动画

使用说明：

	

		

												

				
jQuery旋转插件jqueryrotate
				
			
演示1 直接旋转一个角度

$('#img1').rotate(45);
或
$('#img1').rotate({angle:45});
演示2 鼠标移动效果

$('#img2').rotate({ 
    bind : {
        mouseover : function(){
            $(this).rotate({animateTo: 180});
        }, mouseout : function(){
            $(this).rotate({animateTo: 0});
        }
    }
});
演示3 不停旋转

var angle = 0;
setInterval(function(){
    angle +=3;
    $('#img3').rotate(angle);
}, 50);

var rotation = function (){
    $('#img4').rotate({
        angle: 0, 
        animateTo: 360, 
        callback: rotation
    });
}
rotation();

var rotation2 = function(){
    $('#img5').rotate({
        angle: 0, 
        animateTo: 360, 
        callback: rotation2,
        easing: function(x,t,b,c,d){
            return c*(t/d)+b;
        }
    });
}
rotation2();
演示4 点击旋转

$('#img6').rotate({ 
    bind: {
        click: function(){
            $(this).rotate({
                angle: 0,
                animateTo: 180,
                easing: $.easing.easeInOutExpo
            });
        }
    }
});

var value2 = 0;
$('#img7').rotate({ 
    bind: {
        click: function(){
            value2 +=90;
            $(this).rotate({
                animateTo: value2
            });
        }
    }
});
参数



参数
类型
说明
默认值




angle
数字
旋转一个角度
0


animateTo
数字
从当前的角度旋转到多少度
0


step
函数
每个动画步骤中执行的回调函数，当前角度值作为该函数的第一个参数
无


easing
函数
自定义旋转速度、旋转效果，需要使用 jQuery.easing.js
无


duration
整数
旋转持续时间，以毫秒为单位



callback
函数
旋转完成后的回调函数
无


getRotateAngle
函数
返回旋转对象当前的角度
无


stopRotate
函数
停止旋转
无

2  使用示例