开通VIP,畅享免费电子书等14项超值服
首页
好书
留言交流
下载APP
联系客服
2013.03.06
调用和方法:rotate(angle)
angle参数:[Number] – 默认为 0 – 根据给定的角度旋转图片
例如:
1
$(
"#img"
).rotate(45);
rotate(parameters)
parameters参数:[Object] 包含旋转参数的对象。支持的属性:
).rotate({angle:45});
$("#img").rotate({bind:{click: function(){$(this).rotate({angle: 0,animateTo:180})}}});
$("#img").rotate({bind:{click: function(){$(this).rotate({duration:6000,angle: 0,animateTo:100})}}});
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: unusedNo easing (linear easing):
(t/d)*c ; }
Example (click on arrow):
$("#img").rotate({bind:{click: function(){$(this).rotate({angle: 0,animateTo:180,easing: $.easing.easeInOutElastic})}}});
$("#img").rotate({bind:{click: function(){$(this).rotate({angle: 0,animateTo:180,callback: function(){ alert(1) }})}}});
getRotateAngle
这个函数只是简单地返回旋转对象当前的角度。
1 $("#img").rotate({2 angle: 45,3 bind: {4 click : function(){5 alert($(this).getRotateAngle());6 }7 }8 });
stopRotate
这个函数只是简单地停止正在进行的旋转动画。
1 $("#img").rotate({ 2 bind: { 3 click: function(){ 4 $("#img").rotate({ 5 angle: 0, 6 animateTo: 180, 7 duration: 6000 8 }); 9 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
此文转自www.css88.com 这个网站很不错的!
微信登录中...请勿关闭此页面