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焦点图非常绚丽,切换图片的时候每张图片是向前滑动的,很 ...
随机推荐
- Python3 数字保留后几位
Python3 数字保留后几位 方案一: 使用Python处理精度很重要的浮点数时,建议使用内置的Decimal库: from decimal import Decimal a = Decimal(' ...
- DBCP、c3p0、Druid三大连接池区别
DBCP.c3p0.Druid三大连接池区别 一.连接池优势 如果一个项目中如果需要多个连接,如果一直获取连接,断开连接,这样比较浪费资源: 如果创建一个池,用池来管理Connection,这样就可以 ...
- 20145101《Java程序设计》第9周学习总结
20145101<Java程序设计>第9周学习总结 教材学习内容总结 第十六章 整合数据库 数据库本身是个独立运行的应用程序 撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增 ...
- tf.placeholder使用说明
tf.placeholder(dtype, shape=None, name=None) placeholder,占位符,在tensorflow中类似于函数参数,运行时必须传入值. dtype:数据类 ...
- printf("%f\n",5);
http://zhidao.baidu.com/link?url=87OGcxtDa6fQoeKmk1KylLu4eIBLJSh7CA3n5NWY-Ipm9TxZViFnIui307duCXWhaM0 ...
- MVC ---- Linq查询
Linq查询:编译后,会生成对应的标准查询运算符!所以说,Linq只是类似与Sql的一种更加友好的语法而已: public class LinqDemo{ public static void Tes ...
- C# ashx接收ContentType="text/xml"类型值
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain&qu ...
- VisualStudio使用技巧及快捷键
1. 怎样调整代码排版的格式? 选择:编辑—>高级—>设置文档的格式或编辑—>高级—>设置选中代码的格式. 格式化cs代码:Ctrl+k+f 格式化aspx代码:Ctrl+k+ ...
- mysql 开启远程访问
# vi /etc/mysql/my.cnf修改 bind-address = 127.0.0.1 为 bind-address = 0.0.0.0 修改完成后重启mysql服务 # sudo / ...
- ubuntu16.04 server(amd 64) 下载
http://mirrors.aliyun.com/ubuntu-releases/16.04/ http://old-releases.ubuntu.com/releases/16.04.3/