zoukankan      html  css  js  c++  java
  • jquery.rotate.js库中的rotate函数怎么用。

      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);
            }
        }
    });
  • 相关阅读:
    iOS 苹果开发证书失效的解决方案(Failed to locate or generate matching signing assets)
    iOS NSArray数组过滤
    App Store2016年最新审核规则
    iOS 根据字符串数目,自定义Label等控件的高度
    iOS 证书Bug The identity used to sign the executable is no longer valid 解决方案
    Entity FrameWork 增删查改的本质
    EF容器---代理类对象
    Entity FrameWork 延迟加载本质(二)
    Entity FrameWork 延迟加载的本质(一)
    Entity FrameWork 增删查改
  • 原文地址:https://www.cnblogs.com/phpxuetang/p/5093292.html
Copyright © 2011-2022 走看看