网上发现一个很有意思的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):
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $("#img").rotate({
    bind: {
    click: function () {
    $(this).rotate({
    angle: 0,
    animateTo: 180
    })
    }
    }
    });
  3. animateTo属性:[Number] – default 0 – 从当前角度值动画旋转到给定的角度值 (或给定的角度参数)例如: 结合上面的例子,请参阅使用。
  4. duration属性:[Number] – 指定使用animateTo的动画执行持续时间例如 (click on arrow):
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $("#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://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):

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

getRotateAngle

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

例如:

1
2
3
4
5
6
7
8
$("#img").rotate({
angle: 45,
bind: {
click: function () {
alert($(this).getRotateAngle());
}
}
});

stopRotate

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

例如:

2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#img").rotate({
bind: {
click: function () {
$("#img").rotate({
angle: 0,
animateTo: 180,
duration: 6000
});
setTimeout(function () {
$("#img").stopRotate();
}, 1000);
}
}
});

用这个可以实现很多关于旋转的网页特效,我用这个做了个抽奖大转盘,效果不错,就是没flash顺畅,基本能跑哈哈。

转自http://www.css88.com/archives/4519

jquery rotate的更多相关文章

  1. jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

    需求: 抽奖代码最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: ? 1 2 3 4 5 6 7 8 9 10 ...

  2. jQuery.rotate.js(控制图片转动)

    jQuery.rotate.js笔记   1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的, ...

  3. jQuery.rotate.js笔记

    1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的,在3.x之后的版本可能支持其它元素,但旋转 ...

  4. jquery+jquery.rotate实现图片旋转效果

    首先要下载jquery.min.js 和jquery.rotate.js文件 1.下载地址: https://www.jb51.net/jiaoben/554113.html 2.导入文件 <s ...

  5. jquery.rotate.js实现旋转动画

    1.页面引入jquery.rotate.js文件, 下载地址:https://files.cnblogs.com/files/zhoujl-5071/jquery.rotate.js(打开这个网址,c ...

  6. jquery.rotate.js可选抽奖次数和中奖内容的转盘抽奖demo

    需求: 最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-cont ...

  7. jQuery.rotate.js参数

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

  8. jquery.rotate.js库中的rotate函数怎么用。

    rotate是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome,高级浏览 ...

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

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

随机推荐

  1. hud 1785 畅通工程

    #include<iostream> #include<stdio.h> #include<algorithm> #include<math.h> us ...

  2. Class文件结构

    各种不同平台的虚拟机与所有平台都统一使用的程序存储格式--字节码(ByteCode)是构成平台无关性的基石,除了平台无关性,虚拟机的另外一种中立特性--语言无关性正越来越被开发者所重视.在Java发展 ...

  3. mvc-4控制器和状态(1)

    导语 将状态保存在客户端可以加快页面反映:但应当避免状态或数据保存在DOM中:在MVC中,状态应该保存在控制器中 控制器是视图和模型的纽带,只有控制器知道视图和模型的存在并将它们连接在一起:当加载页面 ...

  4. LightOJ1030 Discovering Gold(概率DP)

    题目大概说一个1×n的格子,每个格子都有一定的黄金,起点在1,终点在n,通过投掷6面骰子前进与骰子点数一样的步数,如果会超过n就重新投,每到一个格子就获得其中的黄金.问到达n能得到的黄金数目的期望. ...

  5. BZOJ1100 : [POI2007]对称轴osi

    将多边形转化为如下的环: 1到2的边,角2,2到3的边,角3,...,n-1到n的边,角n,n到1的边,角1 然后枚举对称轴,如果i是对称轴,那么[i-n,i+n]是一个回文串 用Manacher算法 ...

  6. gdb使用笔记

    相关编译选项: 1.-g 开启gdb 2.-o0,o2  o0表示不优化, 3. -funsigned-char -fdata-sections 会使compiler为每个function和data ...

  7. Google Code Jam 2009 Qualification Round Problem C. Welcome to Code Jam

    本题的 Large dataset 本人尚未解决. https://code.google.com/codejam/contest/90101/dashboard#s=p2 Problem So yo ...

  8. Java Web网站应用中的单点登录

    采用SSH架构加以说明:1.  建立一个登录管理类LoginManager2.  在LoginManager中定义一个集合,管理登录的用户.3.  在Spring中将LoginManager配置成单例 ...

  9. RowDataBound事件

    RowDataBound事件在创建gridView控件时,必须先为GridView的每一行创建一个GridViewRow对象,创建每一行时,将引发一个RowCreated事件:当行创建完毕,每一行Gr ...

  10. List 中对象属性排序

    有几个方法可以实现:让 Student 实现Comparable接口,或是实例化一 个比较器, 现在用 Comparator 比较器实例来做一个:ComparableTest.java import  ...