jQuery旋转插件jqueryrotate用法详解
本文实例讲述了jQuery旋转插件jqueryrotate用法。分享给大家供大家参考，具体如下：
CSS3提供了多种变形效果，比如矩阵变形、位移、缩放、旋转和倾斜等等，让页面更加生动活泼有趣，不再一动不动。然后IE10以下版本的浏览器不支持CSS3变形，虽然IE有私有属性滤镜（filter），但不全面，而且效果和性能都不好。
今天介绍一款jQuery插件——jqueryrotate，它可以实现旋转效果。jqueryrotate支持所有主流浏览器，包括IE6。如果你想在低版本的IE中实现旋转效果，那么jqueryrotate是一个很好的选择。
兼容性
jqueryrotate支持所有主流浏览器，包括IE6。jqueryrotate在高级浏览器中使用CSS3transform属性实现，在低版本IE中使用VML实现。当然，你可以使用IE条件注释，低版本IE使用jqueryrotate，高级浏览器则直接使用CSS3。
使用方法
//演示1
//旋转45angle
$(document.body).click(function(){
//方式1
$('.divOne').rotate(45);
//方式2
$('.divOne').rotate({angle:45});
});
//演示2
//鼠标移动效果
//方式1
$('.divOne').rotate({
bind:{
mouseover:function(){
$(this).rotate({animateTo:180});
},
mouseout:function(){
$(this).rotate({animateTo:0});
}
}
});
//方式2
$('.divOne').mouseover(function(){
$(this).rotate({animateTo:180});
}).mouseout(function(){
$(this).rotate({animateTo:0});
});
//演示3不停旋转
//方式1
varangle=0;
setInterval(function(){
angle+=3;
$('.divOne').rotate(angle);
},50);
//方式2
varrotation=function(){
$('.divOne').rotate({
angle:0,
animateTo:360,
callback:rotation
})
}
rotation();
//方式3
varrotation=function(){
$('.divOne').rotate({
angle:0,
animateTo:360,
callback:rotation,
easing:function(x,t,b,c,d){
returnc*(t/d)+b;
}
})
}
rotation();
//演示4点击旋转
//方式1
$('.divOne').click(function(){
$(this).rotate({
angle:0,
animateTo:180,
easing:$.easing.easeInOutExpo
});
});
varval=0;
$('.divOne').click(function(){
val+=90;
$(this).rotate({
animateTo:val
});
});
参数
演示虽然使用的是图片，但jqueryrotate并不只是能运用在图片上，其他元素如div等也可以使用。同时，你可以发挥想象，制作出更多关于旋转的特效。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。