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. Js删除字符串中的指定字符串

    案例一. 比如:原字符串 var StringFirst = "12:30:08"; 现在要删掉冒号,变成123008 就可以先split var splitFirst = Str ...

  2. HTML 和 JavaScript 编写简单的 404 界面

    编写简单的 404 界面,也可以用来做 500 报错界面,还会飘东西,特别好,蛮漂亮的! <!DOCTYPE html> <html> <head> <met ...

  3. 10:Python2与Python3比较

    1.print 函数 1. print语句没有了,取而代之的是print()函数. Python 2.6与Python 2.7部分地支持这种形式的print语法. 2.Unicode 1.  在pyt ...

  4. 在ubuntu英文系统下使用中文输入法

    How to install and use Chinese Input Method in the English Locale in Ubuntu ?(1) Check if there exis ...

  5. 20145330 《网络对抗》 Eternalblue(MS17-010)漏洞复现与S2-045漏洞的利用及修复

    20145330 <网络对抗> Eternalblue(MS17-010)漏洞利用工具实现Win 7系统入侵与S2-045漏洞的利用及修复 加分项目: PC平台逆向破解:注入shellco ...

  6. Delphi XE5 for Android (七)

    Delphi XE5下,TMainMenu和TPopupMenu不可用,那么如何支持Android的菜单呢? 查看了一些资料,不得要领,只是摸索着先模拟一下吧. 首先在窗体上放置一个TPanel,在其 ...

  7. Python3基础 if elif 示例 判断一个数在哪个区间内

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  8. Python3基础 file seek 将文件的指针恢复到初始位置

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  9. linux下kermit工具的使用

    1.环境: ubuntu16.04 2.背景: 想更换下位机内核 3.使用kermit进行串口传输 举例:传输文件到下位机 2.1首先进入下位机的uboot 2.2 使用uboot自带的命令从串口接收 ...

  10. 分布式系统一致性算法Raft

    Raft 算法也是一种少数服从多数的算法,在任何时候一个服务器可以扮演以下角色之一:Leader:负责 Client 交互 和 log 复制,同一时刻系统中最多存在一个Follower:被动响应请求 ...