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] 包含旋转参数的对象。支持的属性:

  1. angle属性:[Number] – default 0 – 旋转的角度数,并且立即执行
    例如:

    1 $("#img").rotate({angle:45});
  2. 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 });
  3. animateTo属性:[Number] – default 0 – 从当前角度值动画旋转到给定的角度值 (或给定的角度参数)例如: 结合上面的例子,请参阅使用。
  4. 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 });
  5. step属性:[Function] – 每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数
  6. 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 });
  7. 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

分类:html5+css3, jQuery

jQuery旋转插件—rotate-摘自网友的更多相关文章

  1. jQuery旋转插件—rotate

    jQuery旋转插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome rotate(angle) 正值表 ...

  2. jquery旋转插件rotate参数说明

    具体可见:http://www.jianshu.com/p/b632a1ed6a57

  3. html5网页动画总结--jQuery旋转插件jqueryrotate

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

  4. jQuery旋转插件

    jQuery旋转插件,支持Internet Explorer 6.0 + .Firefox 2.0.Safari 3.Opera 9.Google Chrome,高级浏览器下使用Transform,低 ...

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

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

  6. jQuery旋转插件jqueryrotate 图片旋转

    "jquery.rotate.min.js"是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .O ...

  7. jQuery转盘插件rotate

    css .rotate{ background:#aaa; padding:100px; position: relative; } .point { position: absolute; top: ...

  8. 13 款最棒的 jQuery 图像 360° 旋转插件

    在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者文章.jQuery 图像旋转插件可以让用 ...

  9. 9款超酷的jQuery/CSS3插件

    Article From here: http://js.itivy.com/?p=1883 1.jQuery向前滑动切换焦点图 这款jQuery焦点图非常绚丽,切换图片的时候每张图片是向前滑动的,很 ...

随机推荐

  1. 负载均衡之-haproxy

    老规矩,先介绍?复制一段? 1)HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案. 2)HAProxy特别适用于那些负载特大的 ...

  2. P2260 [清华集训2012]模积和

    P2260 [清华集训2012]模积和 整除分块+逆元 详细题解移步P2260题解板块 式子可以拆开分别求解,具体见题解 这里主要讲的是整除分块(数论分块)和mod不为素数时如何求逆元 整除分块:求Σ ...

  3. "/var/lib/mysql/mysql.sock"不存在解决办法

    今天再次遇到mysql.sock问题, 下面是我的三种解决方案. 解决办法: 1./etc/my.cnf,至少增加/修改一行(前提是您find到了这个mysql.sock是在tmp下) [mysql] ...

  4. deepin linux java开发环境搭建全系列

    一.jdk安装 下载并解压到Java文件,这个文件是我自己放的位置 配置环境变量 第一次使用终端需要设置管理员密码 之后开始设置环境变量 sudo vim /etc/profile :wq 保存并退出 ...

  5. 如何Python写一个安卓APP

    前言:用Python写安卓APP肯定不是最好的选择,但是肯定是一个很偷懒的选择,而且实在不想学习Java,再者,就编程而言已经会的就Python与Golang(注:Python,Golang水平都一般 ...

  6. 【修改帐号信息】Eclipse中修改SVN用户名和密码方法

    由于在svn 的界面中并没有为我们提供直接更换用户名密码的地方,所以一旦我们需要更换用户名的就需要自己想一些办法. 解决方案: 在Eclipse 使用SVN 的过程中大多数人往往习惯把访问SVN 的用 ...

  7. HDU 1874 畅通工程续(最短路训练

    因为数据比较小 所以flyod spfa dijkstra 多可以过 Floyd #include <bits/stdc++.h> using namespace std; const i ...

  8. [Shiro] - Shiro之进阶

    上一个知识点ssm, 哪里需要权限,哪里写注解@RequirePermission就行. 但是,真正项目开发的时候, 这种方式就很有局限性了, 当权限配置关系发生变化, 每次都要修改代码, 编译打包重 ...

  9. Ubuntu Eclipse ns3编译中 遇到的OSError 系列问题

    问题1:Permission denied 解决方法:修改文件权限,利用 chmod 命令 修改在 /home/wasdns/workspace/MyNS3_Mac/ns-3.25 (eclipse工 ...

  10. Jmeter 分布式压力测试

      JMeter中进行分布式测试 作为一个纯 JAVA 的GUI应用,JMeter对于CPU和内存的消耗还是很惊人的,所以当需要模拟数以千计的并发用户时,使用单台机器模拟所有的并发用户就有些力不从心, ...