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. Python3 数字保留后几位

    Python3 数字保留后几位 方案一: 使用Python处理精度很重要的浮点数时,建议使用内置的Decimal库: from decimal import Decimal a = Decimal(' ...

  2. DBCP、c3p0、Druid三大连接池区别

    DBCP.c3p0.Druid三大连接池区别 一.连接池优势 如果一个项目中如果需要多个连接,如果一直获取连接,断开连接,这样比较浪费资源: 如果创建一个池,用池来管理Connection,这样就可以 ...

  3. 20145101《Java程序设计》第9周学习总结

    20145101<Java程序设计>第9周学习总结 教材学习内容总结 第十六章 整合数据库 数据库本身是个独立运行的应用程序 撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增 ...

  4. tf.placeholder使用说明

    tf.placeholder(dtype, shape=None, name=None) placeholder,占位符,在tensorflow中类似于函数参数,运行时必须传入值. dtype:数据类 ...

  5. printf("%f\n",5);

    http://zhidao.baidu.com/link?url=87OGcxtDa6fQoeKmk1KylLu4eIBLJSh7CA3n5NWY-Ipm9TxZViFnIui307duCXWhaM0 ...

  6. MVC ---- Linq查询

    Linq查询:编译后,会生成对应的标准查询运算符!所以说,Linq只是类似与Sql的一种更加友好的语法而已: public class LinqDemo{ public static void Tes ...

  7. C# ashx接收ContentType="text/xml"类型值

    public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain&qu ...

  8. VisualStudio使用技巧及快捷键

    1. 怎样调整代码排版的格式? 选择:编辑—>高级—>设置文档的格式或编辑—>高级—>设置选中代码的格式. 格式化cs代码:Ctrl+k+f 格式化aspx代码:Ctrl+k+ ...

  9. mysql 开启远程访问

    # vi /etc/mysql/my.cnf修改 bind-address = 127.0.0.1  为  bind-address = 0.0.0.0 修改完成后重启mysql服务 # sudo / ...

  10. ubuntu16.04 server(amd 64) 下载

    http://mirrors.aliyun.com/ubuntu-releases/16.04/ http://old-releases.ubuntu.com/releases/16.04.3/