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笔记的更多相关文章

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

    jQuery.rotate.js笔记   1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的, ...

  2. jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

    需求: 抽奖代码最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: ? 1 2 3 4 5 6 7 8 9 10 ...

  3. jquery.rotate.js实现旋转动画

    1.页面引入jquery.rotate.js文件, 下载地址:https://files.cnblogs.com/files/zhoujl-5071/jquery.rotate.js(打开这个网址,c ...

  4. jquery.rotate.js可选抽奖次数和中奖内容的转盘抽奖demo

    需求: 最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-cont ...

  5. jQuery.rotate.js参数

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

  6. jquery.form.js笔记

    由于项目的原因,需要异步上传文件,网上找了找,很多都是用jquery.form插件的,于是乎找资料,调代码,做点小笔记. 官方资料:http://www.malsup.com/jquery/form/ ...

  7. jQuery.pin.js笔记

    jQuery.pin.js是一个把元素钉在页面上某个位置的插件,它能够将某个元素一直挂在一个固定的位置而不论滚动条是否滚动. 特点: 1. 可以钉住一个元素,主要作用就是滚动超出的时候不会隐藏而是一直 ...

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

    rotate是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome,高级浏览 ...

  9. jQuery旋转插件jquery.rotate.js 让图片旋转

    演示1 直接旋转一个角度 $('#img1').rotate(45); 演示2 鼠标移动效果 $('#img2').rotate({ bind : { mouseover : function(){ ...

随机推荐

  1. 测试工程师的12最 作为测试猿的你是否都遇到过o_o ....

    在51testing偶然看到一篇文章,觉得很不错,就转过来了.看完笑笑之后,如果能带来点思考就更好了. 1.测试工程师最开心的事:发现了一个很严重的bug,特别是那种隐藏很深,逻辑性的错误.偶第一次发 ...

  2. Eclipse 在线安装properties编辑插件

    在eclipse中,如果在properties文件中写中文,会被自动保存成unicode编码,如lab.submitbutton=\u63d0\u4ea4.     这在查看properties文件时 ...

  3. bat 复制文件夹，文件名递增 等操作

    句尾无';' @echo off : 回显,使命令不在dos中一行一行输出 pause : 暂停,以便看到输出结果 变量 %% 与 % % : https://zhidao.baidu.com/que ...

  4. 2018-2019 ACM-ICPC, Asia Nanjing Regional Contest

    https://codeforces.com/gym/101981 Problem A. Adrien and Austin 贪心,注意细节 f[x]=1:先手必赢. f[x]: 分成两部分(或一部分 ...

  5. Linux常用基本命令(less)

    转: Linux常用基本命令(less) LESS:跟more命令的功能类似,都是用于分页显示内容,但是他的性能比more更高,功能比more更丰富,他读取文件是按需加载 格式: less [opti ...

  6. 第七节，TensorFlow编程基础案例-TensorBoard以及常用函数、共享变量、图操作(下)

    这一节主要来介绍TesorFlow的可视化工具TensorBoard,以及TensorFlow基础类型定义.函数操作,后面又介绍到了共享变量和图操作. 一 TesnorBoard可视化操作 Tenso ...

  7. 马士兵2string buffuer

    string不可变的字符序列 s1=s1+s2

  8. Traffic Management Gym - 101875G

    题意: 有n辆车,在一条直线上运动,给定位置和速度.如果后车追上前车,则后车不会超车,而已变成前车的速度前进,问最后一次上述车速变化发生在何时. 思路: 假设有一下车辆,数字代表移动速度,具体位置未知 ...

  9. SCU-4527 NightMare2(Dijkstra+BFS) ！！！错误题解！！！

    错解警告!!! 描述 可怜的RunningPhoton又做噩梦了..但是这次跟上次不大一样,虽然他又被困在迷宫里,又被装上了一个定时炸弹,但是值得高兴的是,他发现他身边有数不清的财宝,所以他如果能带着 ...

  10. 怎么在linux下创建一个可运行脚本？

    1.touch hello.sh 2.vim hello.sh键入i插入#!/bin/shecho hello world;键入:esc:wq3.chmod 700 hello.sh 4. 执行./h ...