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):
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; }
1
function
(x, t, b, c, d) {
return
(t/d)*c ; }
01
$(
"#img"
).rotate({bind:{
02
click:
function
(){
03
$(
this
).rotate({
04
angle: 0,
05
animateTo:180,
06
easing: $.easing.easeInOutElastic
07
})
08
}
建议继续学习:
- JQuery实现Excel表格呈现 (阅读:46522)
- 分享一个JQUERY颜色选择插件 (阅读:12650)
- jQuery插件---轻量级的弹出窗口wBox. (阅读:9688)
- 10个强大的Ajax jQuery文件上传程序 (阅读:7757)
- jQuery的data()方法 (阅读:7585)
- jQuery性能优化指南 (阅读:7325)
- jQuery Color Animations颜色动画插件 (阅读:7088)
- 精于图片处理的10款jQuery插件 (阅读:6221)
- jQuery中getJSON跨域原理详解 (阅读:5621)
- 贴着另一枚硬币旋转一周则自身转了两周:不同的解释方法 (阅读:5447)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
文章信息- 作者:愚人码头 来源: WEB前端开发
- 标签: jQuery rotate 旋转
- 发布时间:2013-01-10 22:37:34
建议继续学习近3天十大热文- [55] IOS安全–浅谈关于IOS加固的几种方法
- [53] android 开发入门
- [52] 如何拿下简短的域名
- [52] 图书馆的世界纪录
- [50] Go Reflect 性能
- [50] Oracle MTS模式下 进程地址与会话信
- [48] 【社会化设计】自我(self)部分――欢迎区
- [47] 读书笔记-壹百度:百度十年千倍的29条法则
- [37] 程序员技术练级攻略
- [27] 视觉调整-设计师 vs. 逻辑