• jQuery旋转插件jqueryrotate 图片旋转


    "jquery.rotate.min.js"是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:9000,
          angle:0,
          animateTo:360
        })
        }
      })
    });

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

    最后送大家一个完整的例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>

    <body>
    <div class="iii" style="500px;height:400px;background:red;" class="iii">
    <img src="images/0.jpg" name="imge1" class="ii" alt="" />
    <img src="images/4.jpg" name="imge1" class="i" alt="" />
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.rotate.min.js"></script>
    <script type="text/javascript">
    $(".iii").mouseover(function(){
    $(".ii").stop().rotate({animateTo:360});
    $(".i").stop().rotate({angle:0,animateTo:360});
    });
    $(".iii").mouseout(function(){
    $(".ii").stop().rotate({animateTo:0});
    });
    </script>
    </body>
    </html>

  • 相关阅读:
    ant
    maven 构建web项目
    什么叫openapi
    dubbo学习
    Java 获取环境变量
    配置文件书写对象的几种方式
    怎么改svn的登陆账号
    Android 它们的定义View (一)
    eclipse建立cocos2d-x开发环境
    Android——采用SQLiteDatabase操作SQLite数据库
  • 原文地址:https://www.cnblogs.com/lurensang/p/5372830.html
Copyright © 2020-2023  润新知