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
           });
       }
   }
});

　　参考地址：http://www.jq22.com/jquery-info308

转载于:https://www.cnblogs.com/wwlhome/p/4608072.html