jquery rotate
网上发现一个很有意思的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] 包含旋转参数的对象。支持的属性:
- angle属性:[Number] – default 0 – 旋转的角度数,并且立即执行例如:
1
$("#img").rotate({angle:45});
- 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
})
}
}
}); - animateTo属性:[Number] – default 0 – 从当前角度值动画旋转到给定的角度值 (或给定的角度参数)例如: 结合上面的例子,请参阅使用。
- 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
})
}
}
}); - step属性:[Function] – 每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数
- 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
})
}
}
}); - 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 |
$("#img").rotate({ |
stopRotate
这个函数只是简单地停止正在进行的旋转动画。
例如:
2 |
$("#img").rotate({ |
用这个可以实现很多关于旋转的网页特效,我用这个做了个抽奖大转盘,效果不错,就是没flash顺畅,基本能跑哈哈。
转自http://www.css88.com/archives/4519
jquery rotate的更多相关文章
- jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
需求: 抽奖代码最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: ? 1 2 3 4 5 6 7 8 9 10 ...
- jQuery.rotate.js(控制图片转动)
jQuery.rotate.js笔记 1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的, ...
- jQuery.rotate.js笔记
1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的,在3.x之后的版本可能支持其它元素,但旋转 ...
- jquery+jquery.rotate实现图片旋转效果
首先要下载jquery.min.js 和jquery.rotate.js文件 1.下载地址: https://www.jb51.net/jiaoben/554113.html 2.导入文件 <s ...
- jquery.rotate.js实现旋转动画
1.页面引入jquery.rotate.js文件, 下载地址:https://files.cnblogs.com/files/zhoujl-5071/jquery.rotate.js(打开这个网址,c ...
- jquery.rotate.js可选抽奖次数和中奖内容的转盘抽奖demo
需求: 最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-cont ...
- jQuery.rotate.js参数
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- jquery.rotate.js库中的rotate函数怎么用。
rotate是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome,高级浏览 ...
- jQuery旋转插件jquery.rotate.js 让图片旋转
演示1 直接旋转一个角度 $('#img1').rotate(45); 演示2 鼠标移动效果 $('#img2').rotate({ bind : { mouseover : function(){ ...
随机推荐
- hud 1785 畅通工程
#include<iostream> #include<stdio.h> #include<algorithm> #include<math.h> us ...
- Class文件结构
各种不同平台的虚拟机与所有平台都统一使用的程序存储格式--字节码(ByteCode)是构成平台无关性的基石,除了平台无关性,虚拟机的另外一种中立特性--语言无关性正越来越被开发者所重视.在Java发展 ...
- mvc-4控制器和状态(1)
导语 将状态保存在客户端可以加快页面反映:但应当避免状态或数据保存在DOM中:在MVC中,状态应该保存在控制器中 控制器是视图和模型的纽带,只有控制器知道视图和模型的存在并将它们连接在一起:当加载页面 ...
- LightOJ1030 Discovering Gold(概率DP)
题目大概说一个1×n的格子,每个格子都有一定的黄金,起点在1,终点在n,通过投掷6面骰子前进与骰子点数一样的步数,如果会超过n就重新投,每到一个格子就获得其中的黄金.问到达n能得到的黄金数目的期望. ...
- BZOJ1100 : [POI2007]对称轴osi
将多边形转化为如下的环: 1到2的边,角2,2到3的边,角3,...,n-1到n的边,角n,n到1的边,角1 然后枚举对称轴,如果i是对称轴,那么[i-n,i+n]是一个回文串 用Manacher算法 ...
- gdb使用笔记
相关编译选项: 1.-g 开启gdb 2.-o0,o2 o0表示不优化, 3. -funsigned-char -fdata-sections 会使compiler为每个function和data ...
- 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 ...
- Java Web网站应用中的单点登录
采用SSH架构加以说明:1. 建立一个登录管理类LoginManager2. 在LoginManager中定义一个集合,管理登录的用户.3. 在Spring中将LoginManager配置成单例 ...
- RowDataBound事件
RowDataBound事件在创建gridView控件时,必须先为GridView的每一行创建一个GridViewRow对象,创建每一行时,将引发一个RowCreated事件:当行创建完毕,每一行Gr ...
- List 中对象属性排序
有几个方法可以实现:让 Student 实现Comparable接口,或是实例化一 个比较器, 现在用 Comparator 比较器实例来做一个:ComparableTest.java import ...