jQuery 旋转插件 jqueryrotate 用法详解

jqueryrotate 是可以实现 jQuery 旋转效果的插件，它支持 Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高级浏览器下使用duTransform，低版本ie使用VML实现。

rotate() 方法:

属性参数：

参数	类型	说明	默认值
angle	数字	旋转一个角度	0
animateTo	数字	从当前的角度旋转到多少度	0
step	函数	每个动画步骤中执行的回调函数，当前角度值作为该函数的第一个参数	无
easing	函数	自定义旋转速度、旋转效果，需要使用 jQuery.easing.js	无
duration	整数	旋转持续时间，以毫秒为单位
callback	函数	旋转完成后的回调函数	无
getRotateAngle	函数	返回旋转对象当前的角度	无
stopRotate	函数	停止旋转	无

1.angle属性：［Number］ – default 0 – 旋转的角度数，并且立即执行

$(“#img”).rotate({angle:45});

2.bind属性：［Object］对象，包含绑定到一个旋转对象的事件。事件内部的$（this）指向旋转对象-这样可以在内部链式调用- $（this）.rotate（…）。

$("#img").rotate({
  bind:{
    click: function(){
      $(this).rotate({
        angle: 0,
        animateTo:180
      })
    }
  }
});

3.animateTo属性：［Number］ – default 0 – 从当前角度值动画旋转到给定的角度值（或给定的角度参数）

4.duration属性：［Number］ – 指定使用animateTo的动画执行持续时间

$("#img").rotate({
  bind:{
    click: function() {
      $(this).rotate({
        duration: 6000,
        angle: 0,
        animateTo:100
      })
    }
  }
});

5. step属性：［Function］ – 每个动画步骤中执行的回调函数，当前角度值作为该函数的第一个参数

6. easing属性：［Function］ – 默认（see below）
默认：function （x， t， b， c， d） { return -c * （（t=t/d-1）*t*t*t - 1） + b; }

Where:

t： current time，

b： begInnIng value，

c： change In value，

d： duration，

x： unused

没有渐变：No easing （linear easing）：function（x， t， b， c， d） { return （t/d）*c ; }

7.callback属性：［Function］动画完成时执行的回调函数

// 旋转完成后弹出1
$("#img").rotate({
  bind:{
    click: function(){
      $(this).rotate({
        angle: 0,
        animateTo:180,
        callback: function(){ 
          alert(1)
        }
      })
    }
  }
});

8. getRotateAngle这个函数只是简单地返回旋转对象当前的角度。

// 旋转完成后，点击弹出当前角度45
$("#img").rotate({
  angle: 45,
  bind: {
    click : function(){
      alert($(this).getRotateAngle());
    }
  }
});

9.stopRotate这个函数只是简单地停止正在进行的旋转动画。例如：

// 点击旋转180 延迟1秒停止旋转
$("#img").rotate({
    bind: {
        click: function(){
            $(this).rotate({
                angle: 0,
                animateTo: 180,
                duration: 6000
            });
        setTimeout(function(){
            $("#img").stopRotate();
            }, 1000);
        }
    }
});

示例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  
            });  
        }  
    }  
});

jQuery 旋转插件 jqueryrotate 用法详解

rotate() 方法:

相关推荐