码迷,mamicode.com
首页 > Web开发 > 详细

jquery.rotate.js库中的rotate函数怎么用。

时间:2016-01-01 14:55:01      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:

  rotate是jQuery旋转rotate插件,支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现。

    rotate(angle)angle参数:[Number] – 默认为 0

根据给定的角度旋转图片例如:
$(“#img”).rotate(45);或 $(‘#img’).rotate({angle:45})

rotate(parameters)parameters参数:[Object] 包含旋转参数的对象。

支持的属性:

1.angle属性:[Number] – default 0 – 旋转的角度数,并且立即执行

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

2.bind属性:[Object] 对象,包含绑定到一个旋转对象的事件。事件内部的$(this)指向旋转对象-这样可以在内部链式调用- $(this).rotate(…)。

例如 (click on arrow):
$(“#img”).rotate({bind:{
    click: function(){
            $(this).rotate({
                angle: 0,
                animateTo:180
            })
          }
       }
});

3.animateTo属性:[Number] – default 0 – 从当前角度值动画旋转到给定的角度值 (或给定的角度参数)

 

4.duration属性:[Number] – 指定使用animateTo的动画执行持续时间

例如 (click on arrow):
$(“#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 ; }

         

示例1:没有效果,一直转
 $("#scImg").rotate({
                              angle:0,
                              animateTo:360,
                              callback: rotation,
                                easing: function (x,t,b,c,d){     
                                      return (t/d)*c ;
                             }
                      });

       

示例2: 默认的效果
         $("#scImg").rotate({
                              angle:0,
                              animateTo:360,
                              callback: rotation,
                              easing: function (x,t,b,c,d){
return -c*((t=t/d-1)*t*t*t-1)+b ;
                             }
                      });
示例3:
$(“#img”).rotate({bind:{
    click: function(){
        $(this).rotate({
            angle: 0,
            animateTo:180,
            easing: $.easing.easeInOutElastic
            })
        }
    }
});

 

7.callback属性:[Function] 动画完成时执行的回调函数

例如

$(“#img”).rotate({bind:{
    click: function(){
        $(this).rotate({
            angle: 0,
            animateTo:180,
            callback: function(){ alert(1) }
            })
        }
    }
});

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

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

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

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

jquery.rotate.js库中的rotate函数怎么用。

标签:

原文地址:http://www.cnblogs.com/phpxuetang/p/5093292.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!