IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

jQuery旋转插件—rotate

WEB前端开发 2013-01-10 22:37:34 累计浏览 4,465 次
本机暂存

网上发现一个很有意思的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
    03click: function(){
    04
    05$(this).rotate({
    06
    07angle: 0,
    08
    09animateTo:180
    10})
    11}
    12}
    13});
  3. animateTo属性:[Number] - default 0 - 从当前角度值动画旋转到给定的角度值 (或给定的角度参数)例如: 结合上面的例子,请参阅使用。

  4. duration属性:[Number] - 指定使用animateTo的动画执行持续时间例如 (click on arrow):

    01$("#img").rotate({bind:{
    02click: function(){
    03$(this).rotate({
    04duration:6000,
    05angle: 0,
    06animateTo: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:

    1function (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):

    1function(x, t, b, c, d) { return (t/d)*c ; }

    Example (click on arrow):

    01$("#img").rotate({bind:{
    02click: function(){
    03$(this).rotate({
    04angle: 0,
    05animateTo:180,
    06easing: $.easing.easeInOutElastic
    07})
    08}

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,347)
  2. 分享一个JQUERY颜色选择插件 (累计阅读 14,222)
  3. jQuery插件---轻量级的弹出窗口wBox. (累计阅读 10,770)
  4. 10个强大的Ajax jQuery文件上传程序 (累计阅读 8,852)
  5. jQuery性能优化指南 (累计阅读 8,818)
  6. jQuery的data()方法 (累计阅读 8,648)
  7. jQuery Color Animations颜色动画插件 (累计阅读 8,501)
  8. 精于图片处理的10款jQuery插件 (累计阅读 7,364)
  9. 配合jquery实现异步加载页面元素 (累计阅读 6,390)
  10. jQuery中getJSON跨域原理详解 (累计阅读 6,348)