jQuery旋转插件,支持Internet Explorer 6.0 + 、Firefox 2.0、Safari 3、Opera 9、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现。调用和方法: < strong> rotate(angle) angle参数:[Number]–默认为0–根据给定的角度旋转图片例如:

$("#img").rotate(45);

rotate(parameters) parameters参数:[Object]包含旋转参数的对象。支持的属性:

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

    $("#img").rotate({angle:45});
  2. bind属性:[Object]对象,包含绑定到一个旋转对象的事件。事件内部的$(this)指向旋转对象-这样你可以在内部链式调用-$(this).rotate(…)。例如(click on arrow):
    $("#img").rotate({bind:{click:function(){$(this).rotate({angle:0,animateTo:180})}}});
  3. animateTo属性:[Number]–default 0–从当前角度值动画旋转到给定的角度值(或给定的角度参数)例如:结合上面的例子,请参阅使用。
  4. duration属性: [Number]–指定使用animateTo的动画执行持续时间例如 (click on arrow) :
        $("#img").rotate({
    bind: {
    click: function() {
    $(this).rotate({
    duration: 6000,
    angle: 0,
    animateTo: 100
    })
    }
    }
    });
  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:
        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):

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

    Example(click on arrow):

    $("#img").rotate({bind:{click:function(){$(this).rotate({angle:0,animateTo:180,easing:$.easing.easeInOutElastic})}}});
  7. callback属性:[Function]动画完成时执行的回调函数例如(click on arrow):
    $("#img").rotate({bind:{click:function(){$(this).rotate({angle:0,animateTo:180,callback:function(){alert(1)}})}}});

getRotateAngle 这个函数只是简单地返回旋转对象当前的角度。例如:

$("#img").rotate({angle:45,bind:{click:function(){alert($(this).getRotateAngle())}}});

stopRotate 这个函数只是简单地停止正在进行的旋转动画。例如:

$("#img").rotate({bind:{click:function(){$("#img").rotate({angle:0,animateTo:180,duration:6000});setTimeout(function(){$("#img").stopRotate()},1000)}}});

用这个可以实现很多关于旋转的网页特效。

jQuery旋转插件的更多相关文章

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

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

  2. jQuery旋转插件—rotate-摘自网友

    jQuery旋转插件—rotate 时间:2013年01月03日作者:愚人码头查看次数:5,660 views评论次数:6条评论 网上发现一个很有意思的jQuery旋转插件,支持Internet Ex ...

  3. jQuery旋转插件—rotate

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

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

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

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

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

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

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

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

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

  8. Glide.js:响应式 & 触摸友好的 jQuery 滑块插件

    Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...

  9. Salvattore:CSS 驱动的 jQuery Masonry 插件

    Salvattore 是一个 jQuery 砌体的替代,使用 CSS 驱动的配置.Salvattore 根据您指定的列数组织你的 HTML 元素.容器中的每一个项目会一个接一个被放置在列内,只需要简单 ...

随机推荐

  1. Retrofit2.0+OkHttp设置统一的请求头(request headers)

    有时候要求Retrofit2的接口中每个都要增加上headers,又不想做重复的事情,可以使用这种方法来为每个request请求都设置上相同的请求头header. 修改请求头request heade ...

  2. poj 4982 踩方格

    4982:踩方格 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 有一个方格矩阵,矩阵边界在无穷远处.我们做如下假设:a.    每走一步时,只能从当前方格移 ...

  3. Tomcat基础教程(二)

    上一篇说到了Tomcat的介绍,下载及安装,这一篇我会详述Tomcat服务器结构 一.Tomcat服务器结构图: Tomcat服务器中可以配置多个Service,每个Service可以包含多个Conn ...

  4. Solr4.8.0源码分析(13)之LuceneCore的索引修复

    Solr4.8.0源码分析(13)之LuceneCore的索引修复 题记:今天在公司研究elasticsearch,突然看到一篇博客说elasticsearch具有索引修复功能,顿感好奇,于是点进去看 ...

  5. 转:MySQL导入.sql文件及常用命令

    在MySQL Qurey   Brower中直接导入*.sql脚本,是不能一次执行多条sql命令的,在mysql中执行sql文件的命令: mysql> source   d:/myprogram ...

  6. KEIL, a Smart Comliler

    KEIL是一个神的编译器.举一二例来说明: 1. 编译器出现WARNING"expression with possibly no effect",是提示你当前语在正做无用功,如在 ...

  7. Couchbase 上手nosql for .net

    由于项目需要,准备上手nosql数据库,比对了一番之后终于决定使用 couchbase.好了开始吧: 安装 地址:http://www.couchbase.com/get-started-develo ...

  8. Borg Maze(bfs+prim)

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6971   Accepted: 2345 Description The B ...

  9. BZOJ1984: 月下“毛景树”

    1984: 月下“毛景树” Time Limit: 20 Sec  Memory Limit: 64 MBSubmit: 713  Solved: 245[Submit][Status] Descri ...

  10. JavaScript AMD 模块加载器原理与实现

    关于前端模块化,玉伯在其博文 前端模块化开发的价值 中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器 模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者 ...