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函数怎么用。的更多相关文章

  1. JS循环中使用bind函数的参数传递问题

    JS循环中使用bind函数的参数传递问题,问题代码如下: for (var sc in result) { var tempp = '<div class="sidebar_todo_ ...

  2. numpy函数库中一些常用函数的记录

    ##numpy函数库中一些常用函数的记录 最近才开始接触Python,python中为我们提供了大量的库,不太熟悉,因此在<机器学习实战>的学习中,对遇到的一些函数的用法进行记录. (1) ...

  3. 近期写js库中遇到的一个判别的问题

    最近在写一个自己的js库,正写到数组包,在里面定义了一个排序,只对纯数字数据进行排序的方法,但是在测试的时候发现一个很诡异的问题,那就是传入一个对象的时候,它没有返回erroemsg而是返回了对象,上 ...

  4. jQuery的JS库在本地运行项目时提示无法加载

    最近公司有个项目在我本地运行时引用本地的jquery.js,浏览器提示无法加载 <script src="/js/newperson/jquery-1.11.3.min.js" ...

  5. 查找库中的某个函数,grep命令的用法。

    程序中调用了某个库中的函数,我想知道这个函数具体的作用,就必须去看这个库的源代码. 那么问题来了:如何从库中众多的.h文件中,得知我想要的函数在哪个文件里? 最后用grep命令成功解决. 具体用法:先 ...

  6. jquery.js 库中的 选择器

    <html><head><script type="text/javascript" src="jquery.js">< ...

  7. STL库中的正态分布函数

    在设计抽奖一类程序中,有时会需要一种概率“有较大可能获得一个普通结果,有较小可能获得一个糟糕或极好的结果”,这就可以用正态分布函数来获得这样一个结果. STL中已经提供了一系列随机分布的函数,包括正态 ...

  8. js对象中的回调函数

    假设一个页面new多个同类型的对象,且该对象内部含异步请求的回调,很有可能回调函数中的this指向最后一次new的对象. 解决该问题的办法是,异步请求使用$.ajax并制定其context为this, ...

  9. 机器学习之numpy库中常用的函数介绍(一)

    1. mat() mat()与array的区别: mat是矩阵,数据必须是2维的,是array的子集,包含array的所有特性,所做的运算都是针对矩阵来进行的. array是数组,数据可以是多维的,所 ...

随机推荐

  1. python 之 append extend

    概述 append和extend针对python的列表 列表内的元素为对象,可以为数字.字符串.列表等等 append添加的是一个对象 extend添加一个列表 例子 append >>& ...

  2. [c++基本语法]——构造函数初始化列表

    c++构造函数初始化成员变量列表: #pragma once class Node { public: int data; // 权值 Node *parent; // 父节点 Node *left; ...

  3. 学习OpenCV——Kalman滤波

    背景: 卡尔曼滤波是一种高效率的递归滤波器(自回归滤波器), 它能够从一系列的不完全及包含噪声的测量中,估计动态系统的状态.卡尔曼滤波的一个典型实例是从一组有限的,包含噪声的,对物体位置的观察序列(可 ...

  4. bash 截取字符串

    转载自http://blog.chinaunix.net/uid-1757778-id-3162034.html 命令的2种替换形式 $()和 ``示例:截断字符串    a):    #截取文件名称 ...

  5. 删除NSMutableArray中的二维数组

    // 删除模型数据 [self.mutableArr[indexPath.section] removeObjectAtIndex:indexPath.row]; //删除UI(刷新数据,UI) [s ...

  6. Swift游戏实战-跑酷熊猫 01 创建工程导入素材

    在这节里,我们将建立一个游戏工程,并导入一些必要的素材,例如序列帧动画文件,声音素材文件.动画文件我们使用atlas形式.在打包发布或者模拟器测试的时候,它会将整个.atlas文件夹下的图片打包成一张 ...

  7. [原创]java WEB学习笔记73:Struts2 学习之路-- strut2中防止表单重复提交

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  8. [转]MySQL数据库引擎

    经常用MySQL数据库,但是,你在用的时候注意过没有,数据库的存储引擎,可能有注意但是并不清楚什么意思,可能根本没注意过这个问题,使用了默认的数据库引擎,当然我之前属于后者,后来成了前者,然后就有了这 ...

  9. mysql长连接和短连接的问题 转

    什么是长连接? 其实长连接是相对于通常的短连接而说的,也就是长时间保持客户端与服务端的连接状态. 通常的短连接操作步骤是: 连接->数据传输->关闭连接: 而长连接通常就是: 连接-> ...

  10. webpack.config.js

    var webpack = require('webpack'); module.exports = { //插件项 plugins: [ new webpack.optimize.CommonsCh ...