之前我们做了两款rotate抽奖效果,请看右侧相关特效。本文介绍了jqueryroate七种不同的调用效果。
HTML
<img src="images/chrome.png" width="256" height="256"/>
演示一、旋转45度
$('#img1').rotate({angle: 45});
演示二、鼠标悬浮和离开旋转动画效果
$("#img2").rotate({
bind: {
mouseover: function() {
$(this).rotate({
animateTo: 180
});
},
mouseout: function() {
$(this).rotate({
animateTo: 0
});
}
}
});
演示三、每50毫秒自动旋转
var angle = 0;
setInterval(function() {
angle += 3;
$("#img3").rotate(angle);
},
50);
演示四、360度循环旋转
var rotation = function() {
$("#img4").rotate({
angle: 0,
animateTo: 360,
callback: rotation
});
}
rotation();
演示五、360度旋转回调
var rotation2 = function() {
$("#img5").rotate({
angle: 0,
animateTo: 360,
callback: rotation2,
easing: function(x, t, b, c, d) { // t: current time, b: begInnIng value, c: change In value, d: duration
return c * (t / d) + b;
}
});
}
rotation2();
演示六、点击旋转一
$("#img6").rotate({
bind: {
click: function() {
$(this).rotate({
angle: 0,
animateTo: 180,
easing: $.easing.easeInOutExpo
})
}
}
});
演示七、点击旋转二
var value2 = 0 $("#img7").rotate({
bind: {
click: function() {
value2 += 90;
$(this).rotate({
animateTo: value2
})
}
}
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791