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);
}
}
});
jquery.rotate.js库中的rotate函数怎么用。的更多相关文章
- JS循环中使用bind函数的参数传递问题
JS循环中使用bind函数的参数传递问题,问题代码如下: for (var sc in result) { var tempp = '<div class="sidebar_todo_ ...
- numpy函数库中一些常用函数的记录
##numpy函数库中一些常用函数的记录 最近才开始接触Python,python中为我们提供了大量的库,不太熟悉,因此在<机器学习实战>的学习中,对遇到的一些函数的用法进行记录. (1) ...
- 近期写js库中遇到的一个判别的问题
最近在写一个自己的js库,正写到数组包,在里面定义了一个排序,只对纯数字数据进行排序的方法,但是在测试的时候发现一个很诡异的问题,那就是传入一个对象的时候,它没有返回erroemsg而是返回了对象,上 ...
- jQuery的JS库在本地运行项目时提示无法加载
最近公司有个项目在我本地运行时引用本地的jquery.js,浏览器提示无法加载 <script src="/js/newperson/jquery-1.11.3.min.js" ...
- 查找库中的某个函数,grep命令的用法。
程序中调用了某个库中的函数,我想知道这个函数具体的作用,就必须去看这个库的源代码. 那么问题来了:如何从库中众多的.h文件中,得知我想要的函数在哪个文件里? 最后用grep命令成功解决. 具体用法:先 ...
- jquery.js 库中的 选择器
<html><head><script type="text/javascript" src="jquery.js">< ...
- STL库中的正态分布函数
在设计抽奖一类程序中,有时会需要一种概率“有较大可能获得一个普通结果,有较小可能获得一个糟糕或极好的结果”,这就可以用正态分布函数来获得这样一个结果. STL中已经提供了一系列随机分布的函数,包括正态 ...
- js对象中的回调函数
假设一个页面new多个同类型的对象,且该对象内部含异步请求的回调,很有可能回调函数中的this指向最后一次new的对象. 解决该问题的办法是,异步请求使用$.ajax并制定其context为this, ...
- 机器学习之numpy库中常用的函数介绍(一)
1. mat() mat()与array的区别: mat是矩阵,数据必须是2维的,是array的子集,包含array的所有特性,所做的运算都是针对矩阵来进行的. array是数组,数据可以是多维的,所 ...
随机推荐
- Win32和MFC项目如何输出调试信息到VS的调试窗口
直接举例说明: Win32项目: #include <Windows.h> OutputDebugString(TEXT("调试信息:MyCircleImpl::~MyCircl ...
- iOS 快递查询
#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...
- 在Android平台下的基于Linux-C 的测试程序
iTOP-4412 开发板可以运行的文件系统很多,在具体的文件系统上实现特定功能前,可以 使用Linux-C 程序来测试硬件以及驱动.而且这些程序很容易移植到Android.Qt/E 以及最小文件系统 ...
- Inventory Pro 装备拾取的实现
以后都按照插件使用,提出问题,回答问题的方式来进行总结和学习 效果图 1.运行相关的例子,场景中出现4个矩形,这4个矩形是用来模拟物品掉落的包裹,移动Player靠近物品 2.使用鼠标点击物品正方体, ...
- HTML基础-- 标签、表格
<html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...
- SQL server 表之间的关系生成图
选择数据库名->数据库关系鼠标右键->新建数据库关系图 按着ctrl选择要添加的表 点击添加
- 树形DP+RMQ+单调队列(Bob’s Race HDU4123)
题意:有n个房子,这些房子被n-1条道路连接,有一些运动员从一个房子为起点尽可能跑最远的距离且不能通过一条道路超过两次,这些运行员不能选择同样的起点,这些运动员跑的最远距离和最近距离的差值不能超过Q, ...
- [原创]java WEB学习笔记91:Hibernate学习之路-- -HQL 迫切左外连接,左外连接,迫切内连接,内连接,关联级别运行时的检索策略 比较。理论,在于理解
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- <c:if>标签的使用
<c:if>标签用来在页面中实现条件化的判断功能.它的主要目的就是替换Java脚本中的if语句,来实现页面内容的条件化输出功能.这个标签所进行的判读主要是依据表达式来进行的,如果该表达式的 ...
- (转)【ASP.NET开发】获取客户端IP地址 via C#
[ASP.NET开发]获取客户端IP地址 via C# 说明:本文中的内容是我综合博客园上的博文和MSDN讨论区的资料,再通过自己的实际测试而得来,属于自己原创的内容说实话很少,写这一篇是为了记录自己 ...