jQuery旋转插件—rotate-摘自网友
jQuery旋转插件—rotate
时间:2013年01月03日作者:愚人码头查看次数:5,660 views评论次数:6条评论
网上发现一个很有意思的jQuery旋转插件,支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现。
调用和方法:
rotate(angle)
angle参数:[Number] – 默认为 0 – 根据给定的角度旋转图片
例如:
1 |
$( "#img" ).rotate(45); |
rotate(parameters)
parameters参数:[Object] 包含旋转参数的对象。支持的属性:
- angle属性:[Number] – default 0 – 旋转的角度数,并且立即执行
例如:1
$(
"#img"
).rotate({angle:45});
- bind属性:[Object] 对象,包含绑定到一个旋转对象的事件。事件内部的$(this)指向旋转对象-这样你可以在内部链式调用- $(this).rotate(…)。例如 (click on arrow):
01
$(
"#img"
).rotate({bind:{
02
03
click:
function
(){
04
05
$(
this
).rotate({
06
07
angle: 0,
08
09
animateTo:180
10
})
11
}
12
}
13
});
- animateTo属性:[Number] – default 0 – 从当前角度值动画旋转到给定的角度值 (或给定的角度参数)例如: 结合上面的例子,请参阅使用。
- duration属性:[Number] – 指定使用animateTo的动画执行持续时间例如 (click on arrow):
01
$(
"#img"
).rotate({bind:{
02
click:
function
(){
03
$(
this
).rotate({
04
duration:6000,
05
angle: 0,
06
animateTo:100
07
})
08
}
09
}
10
});
- step属性:[Function] – 每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数
- easing属性:[Function] – 默认 (see below) – Easing function used to make animation look more natural. It takes five parameters (x,t,b,c,d) to support easing from http://gsgd.co.uk/sandbox/jquery/easing/ (for more details please see documentation at their website). Remember to include easing plugin before using it in jQueryRotate!Default function:
1
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):1
function
(x, t, b, c, d) {
return
(t/d)*c ; }
Example (click on arrow):
01
$(
"#img"
).rotate({bind:{
02
click:
function
(){
03
$(
this
).rotate({
04
angle: 0,
05
animateTo:180,
06
easing: $.easing.easeInOutElastic
07
})
08
}
09
}
10
});
- callback属性:[Function] 动画完成时执行的回调函数例如 (click on arrow):
01
$(
"#img"
).rotate({bind:{
02
03
click:
function
(){
04
$(
this
).rotate({
05
angle: 0,
06
animateTo:180,
07
callback:
function
(){ alert(1) }
08
})
09
}
10
}
11
});
getRotateAngle
这个函数只是简单地返回旋转对象当前的角度。
例如:
1 |
$( "#img" ).rotate({ |
2 |
angle: 45, |
3 |
bind: { |
4 |
click : function (){ |
5 |
alert($( this ).getRotateAngle()); |
6 |
} |
7 |
} |
8 |
}); |
stopRotate
这个函数只是简单地停止正在进行的旋转动画。
例如:
01 |
$( "#img" ).rotate({ |
02 |
bind: { |
03 |
click: function (){ |
04 |
$( "#img" ).rotate({ |
05 |
angle: 0, |
06 |
animateTo: 180, |
07 |
duration: 6000 |
08 |
}); |
09 |
setTimeout( function (){ |
10 |
$( "#img" ).stopRotate(); |
11 |
}, 1000); |
12 |
} |
13 |
} |
14 |
}); |
用这个可以实现很多关于旋转的网页特效,我用这个做了个抽奖大转盘,效果不错,就是没flash顺畅,基本能跑哈哈。
jqueryrotate项目地址:http://code.google.com/p/jqueryrotate/
代码示例:http://code.google.com/p/jqueryrotate/wiki/Examples
声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《jQuery旋转插件—rotate》
jQuery旋转插件—rotate-摘自网友的更多相关文章
- jQuery旋转插件—rotate
jQuery旋转插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome rotate(angle) 正值表 ...
- jquery旋转插件rotate参数说明
具体可见:http://www.jianshu.com/p/b632a1ed6a57
- html5网页动画总结--jQuery旋转插件jqueryrotate
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- jQuery旋转插件
jQuery旋转插件,支持Internet Explorer 6.0 + .Firefox 2.0.Safari 3.Opera 9.Google Chrome,高级浏览器下使用Transform,低 ...
- jQuery旋转插件jquery.rotate.js 让图片旋转
演示1 直接旋转一个角度 $('#img1').rotate(45); 演示2 鼠标移动效果 $('#img2').rotate({ bind : { mouseover : function(){ ...
- jQuery旋转插件jqueryrotate 图片旋转
"jquery.rotate.min.js"是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .O ...
- jQuery转盘插件rotate
css .rotate{ background:#aaa; padding:100px; position: relative; } .point { position: absolute; top: ...
- 13 款最棒的 jQuery 图像 360° 旋转插件
在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者文章.jQuery 图像旋转插件可以让用 ...
- 9款超酷的jQuery/CSS3插件
Article From here: http://js.itivy.com/?p=1883 1.jQuery向前滑动切换焦点图 这款jQuery焦点图非常绚丽,切换图片的时候每张图片是向前滑动的,很 ...
随机推荐
- 负载均衡之-haproxy
老规矩,先介绍?复制一段? 1)HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案. 2)HAProxy特别适用于那些负载特大的 ...
- P2260 [清华集训2012]模积和
P2260 [清华集训2012]模积和 整除分块+逆元 详细题解移步P2260题解板块 式子可以拆开分别求解,具体见题解 这里主要讲的是整除分块(数论分块)和mod不为素数时如何求逆元 整除分块:求Σ ...
- "/var/lib/mysql/mysql.sock"不存在解决办法
今天再次遇到mysql.sock问题, 下面是我的三种解决方案. 解决办法: 1./etc/my.cnf,至少增加/修改一行(前提是您find到了这个mysql.sock是在tmp下) [mysql] ...
- deepin linux java开发环境搭建全系列
一.jdk安装 下载并解压到Java文件,这个文件是我自己放的位置 配置环境变量 第一次使用终端需要设置管理员密码 之后开始设置环境变量 sudo vim /etc/profile :wq 保存并退出 ...
- 如何Python写一个安卓APP
前言:用Python写安卓APP肯定不是最好的选择,但是肯定是一个很偷懒的选择,而且实在不想学习Java,再者,就编程而言已经会的就Python与Golang(注:Python,Golang水平都一般 ...
- 【修改帐号信息】Eclipse中修改SVN用户名和密码方法
由于在svn 的界面中并没有为我们提供直接更换用户名密码的地方,所以一旦我们需要更换用户名的就需要自己想一些办法. 解决方案: 在Eclipse 使用SVN 的过程中大多数人往往习惯把访问SVN 的用 ...
- HDU 1874 畅通工程续(最短路训练
因为数据比较小 所以flyod spfa dijkstra 多可以过 Floyd #include <bits/stdc++.h> using namespace std; const i ...
- [Shiro] - Shiro之进阶
上一个知识点ssm, 哪里需要权限,哪里写注解@RequirePermission就行. 但是,真正项目开发的时候, 这种方式就很有局限性了, 当权限配置关系发生变化, 每次都要修改代码, 编译打包重 ...
- Ubuntu Eclipse ns3编译中 遇到的OSError 系列问题
问题1:Permission denied 解决方法:修改文件权限,利用 chmod 命令 修改在 /home/wasdns/workspace/MyNS3_Mac/ns-3.25 (eclipse工 ...
- Jmeter 分布式压力测试
JMeter中进行分布式测试 作为一个纯 JAVA 的GUI应用,JMeter对于CPU和内存的消耗还是很惊人的,所以当需要模拟数以千计的并发用户时,使用单台机器模拟所有的并发用户就有些力不从心, ...