jQuery旋转插件jquery.rotate.js 让图片旋转
演示1 直接旋转一个角度
$('#img1').rotate(45);
演示2 鼠标移动效果
$('#img2').rotate({
bind : {
mouseover : function(){
$(this).rotate({animateTo: 180});
}, mouseout : function(){
$(this).rotate({animateTo: 0});
}
}
});
演示3 不停旋转
var angle = 0;
setInterval(function(){
angle +=3;
$('#img3').rotate(angle);
}, 50);
var rotation = function (){
$('#img4').rotate({
angle: 0,
animateTo: 360,
callback: rotation
});
}
rotation();
var rotation2 = function(){
$('#img5').rotate({
angle: 0,
animateTo: 360,
callback: rotation2,
easing: function(x,t,b,c,d){
return c*(t/d)+b;
}
});
}
rotation2();
演示4 点击旋转
$('#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
});
}
}
});
如果觉得《jQuery旋转插件jquery.rotate.js 让图片旋转》不错,请把本站告诉您身边的朋友!
转载注明本文地址:http://www.ablanxue.com/prone_21720_1.html
注:需要案例和js的可以去下载,http://download.csdn.net/detail/lj88811498/8696185