jQuery旋转插件—rotate-摘自网友
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] 包含旋转参数的对象。支持的属性:
- angle属性:[Number] – default 0 – 旋转的角度数,并且立即执行
例如:1
$(
"#img"
).rotate({angle:45});
- 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
});
- animateTo属性:[Number] – default 0 – 从当前角度值动画旋转到给定的角度值 (或给定的角度参数)例如: 结合上面的例子,请参阅使用。
- 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
});
- 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):
01
$(
"#img"
).rotate({bind:{
02
click:
function
(){
03
$(
this
).rotate({
04
angle: 0,
05
animateTo:180,
06
easing: $.easing.easeInOutElastic
07
})
08
}
09
}
10
});
- 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》
jQuery旋转插件—rotate-摘自网友的更多相关文章
- jQuery旋转插件—rotate
jQuery旋转插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome rotate(angle) 正值表 ...
- jquery旋转插件rotate参数说明
具体可见:http://www.jianshu.com/p/b632a1ed6a57
- html5网页动画总结--jQuery旋转插件jqueryrotate
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- jQuery旋转插件
jQuery旋转插件,支持Internet Explorer 6.0 + .Firefox 2.0.Safari 3.Opera 9.Google Chrome,高级浏览器下使用Transform,低 ...
- jQuery旋转插件jquery.rotate.js 让图片旋转
演示1 直接旋转一个角度 $('#img1').rotate(45); 演示2 鼠标移动效果 $('#img2').rotate({ bind : { mouseover : function(){ ...
- jQuery旋转插件jqueryrotate 图片旋转
"jquery.rotate.min.js"是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .O ...
- jQuery转盘插件rotate
css .rotate{ background:#aaa; padding:100px; position: relative; } .point { position: absolute; top: ...
- 13 款最棒的 jQuery 图像 360° 旋转插件
在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者文章.jQuery 图像旋转插件可以让用 ...
- 9款超酷的jQuery/CSS3插件
Article From here: http://js.itivy.com/?p=1883 1.jQuery向前滑动切换焦点图 这款jQuery焦点图非常绚丽,切换图片的时候每张图片是向前滑动的,很 ...
随机推荐
- Kali更新deb源
vim /etc/apt/sources.list #中科大deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contrib ...
- 安装使用composer基本流程
composer工作原理: 这里经过几个步骤:1.composer读取composer.json(这个文件手动建立,官网有格式),这个json是在当前执行composer目录的,如果目录下没有这个js ...
- 20145305 《网络对抗》逆向及Bof基础实践
逆向及Bof基础实践说明 实践说明地址 实验过程及结果截图
- Java JDK8 学习笔记 1-3章
第一章 Java平台概论 1.了解Java的前世今生,Java SE.Java EE.JavaME三大平台.其中Java SE主要由四部分JVM.JRE.JDK与Java语言,JDK包含JRE,JRE ...
- 20145212罗天晨 注入shellcode实验及Retuen-to-libc实验
注入shellcode实验 实验步骤 一.准备一段shellcode 二.设置环境 Bof攻击防御技术 1.从防止注入的角度来看:在编译时,编译器在每次函数调用前后都加入一定的代码,用来设置和检测堆栈 ...
- SPOJ Prime or Not - 快速乘 - 快速幂
Given the number, you are to answer the question: "Is it prime?" Solutions to this problem ...
- noip 瑞士轮 - 归并
背景 在双人对决的竞技性比赛,如乒乓球.羽毛球.国际象棋中,最常见的赛制是淘汰赛和循环赛.前者的特点是比赛场数少,每场都紧张刺激,但偶然性较高.后者的特点是较为公平,偶然性较低,但比赛过程往往十分冗长 ...
- CEF解决加载慢问题
转载:http://blog.csdn.net/weolar/article/details/51994895 CEF加载慢的时候,加上以下代码,通过命令行的方式: CefRefPtr<CefC ...
- Linux文件时间详解ctime、mtime、atime【转】
本文转载自:http://blog.csdn.net/doiido/article/details/43792561 Linux系统文件有三个主要的时间属性,分别是 ctime(change time ...
- 不在同一主机:vsftpd+pam+mysql
配置环境:Centos7上的mariadb + Centos6上的vsftpd 一.安装所需要程序 1.安装vsftpd和pam_mysql(在centos6-->192.168.108.160 ...