码迷,mamicode.com
首页 > Web开发 > 详细

jQuery旋转插件jquery.rotate.js 让图片旋转

时间:2015-06-29 19:28:00      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:

演示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

jQuery旋转插件jquery.rotate.js 让图片旋转

标签:

原文地址:http://www.cnblogs.com/wwlhome/p/4608072.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!