jQuery.rotate.js笔记

1. jQuery.rotate.js是什么

一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画。

这个库开发的目的是为了旋转img的，在3.x之后的版本可能支持其它元素，但旋转其它元素在一些低版本浏览器可能出现兼容器问题。所以应该尽量只用在旋转img元素上。

2. jQuery.rotate.js怎么用

2.1 接口

总共提供了四个方法：

rorate(angle);

rorate(parameters);

getRorateAngle();

stopRotate();

2.1.1 rorate(angle);

传入一个角度，会直接将元素旋转到对应的角度，并不会有动画：

$("#foo").rotate(15);

效果：

2.1.2 rorate(parameters);

支持的参数：

参数名	类型	说明
angle	Number	旋转到指定的角度，不带动画，默认是0
animateTo	Number	旋转到指定的角度，使用动画
bind	Object	可以传入一个对象，作为事件绑定到元素上。
center	Array	用来设定旋转的中心，传入的数组是[X,Y]格式的，可以使用数值[100,100]或者百分比[“50%”,“50%”]，默认是以元素的中心点旋转
duration	Number	指定动画的持续时间，默认是1000毫秒
step	Function	传入一个回调函数在动画的每一步都会调用一下
easing	Function	让动画看起来更自然，感觉用不到，而且本人对图形学没啥研究，感兴趣的官网有详细描述，就不再深究了….
callback	Function	当动画完成时的回调函数。

转动眼睛关于bind的想法：

jQuery已经为我们提供了很健全的事件绑定接口了，为啥这里还提供bind呢？

猜想可能是为了将同义操作统一化。

Demo ：一个简单的例子（倾斜的图画在鼠标移上去的时候摆正，离开的时候又恢复原样）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                text-align:center;    
            }
            #foo{
                width:300px;
                height:200px;
                margin-top:100px;
            }
        </style>
    </head>
    <body>
        
        <img id="foo" src="img/foo.jpg" alt="" />

<script type="text/javascript" src="js/jquery.min.js"></script>    
<script type="text/javascript" src="js/jQueryRotate.js"></script>        
<script type="text/javascript">

    $(document).ready(function(){
        $("#foo").rotate({
            angle:15,
            bind:{
                mouseover:function(){
                    $(this).rotate({
                        animateTo:0
                    });
                },
                mouseout:function(){
                    $(this).rotate({
                        animateTo:15
                    });
                }
            }
        });
    });
    
</script>        
    </body>
</html>

效果：

Demo：center的使用

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                text-align:center;    
            }
            #foo{
                width:200px;
                height:130px;
                margin-top:100px;
            }
        </style>
    </head>
    <body>
        
        <img id="foo" src="img/foo.jpg" alt="" />

<script type="text/javascript" src="js/jquery.min.js"></script>    
<script type="text/javascript" src="js/jQueryRotate.js"></script>        
<script type="text/javascript">

$(document).ready(function(){
    
    $("#foo").rotate({
        bind:{
            click:function(){
                $(this).rotate({
                    center:["0","100%"],
                    animateTo:90
                });
            }
        }
    });
    
});
    
</script>        
    </body>
</html>

效果：

2.1.3 getRorateAngle();

获取元素当前旋转的角度

$(document).ready(function(){
    $("#foo").rotate({
        angle:15,
        bind:{
            click:function(){
                console.log($(this).getRotateAngle());
            }
        }
    });
});

2.1.4 stopRotate();

停止元素的旋转。

一个小例子，元素不断的匀速旋转，单击时停止旋转：

$(document).ready(function(){
    
    var rotate=function(){
        $("#foo").rotate({
            angle:0,
            animateTo:360,
            duration:5000,
            callback:rotate,
            easing: function (x,t,b,c,d){
              return c*(t/d)+b;
           },
           bind:{
                   click:function(){
                       $(this).stopRotate();
                   }
           }
        });
    }
    rotate();
    
});

效果：

另一种实现元素不断旋转的方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                text-align:center;    
            }
            #foo{
                width:300px;
                height:200px;
                margin-top:100px;
            }
        </style>
    </head>
    <body>
        
        <img id="foo" src="img/foo.jpg" alt="" />

<script type="text/javascript" src="js/jquery.min.js"></script>    
<script type="text/javascript" src="js/jQueryRotate.js"></script>        
<script type="text/javascript">

$(document).ready(function(){
    
    var angle=0;
    var rotate=function(){
        angle=angle+10;
        $("#foo").rotate({
            animateTo:angle,
            duration:100
        })
    }
    setInterval(rotate,100);
    
});
    
</script>        
    </body>
</html>

效果并不是特别理想，感觉有些卡顿。

3. 总结

1. jQuery.rotate适合对img元素进行旋转操作。

2. 可以设置动画过渡，可以设置过渡的时间。

3. 可以设置完成回调函数。

4. 可以自定义旋转中心。

5. 可以设置动画曲线。

6. 编不出了…

参考资料：

1. 官网 http://jqueryrotate.com/

jQuery.rotate.js（控制图片转动）