「jQuery」圖片旋轉套件

作法：圖轉360度或者斜45度角....等。

一、先下載：http://jqueryrotate.com/

二、以下用法教學：

套件裡面語法：
 

原始設定(默認)：function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }

t：current time,當前時間

b：beginning value, 始值

c：change In value, 改變的值

d：duration,持續時間

x：unused 沒用

1. 圖片改成45度角  

方法一：
$(document).ready(function(){
          $("#img").rotate(45);
           });

方法二：

$(document).ready(function(){
          $("#img").rotate({angle:45});
           });

2.按一下旋轉180度

$(document).ready(function(){
          $("#img").rotate({bind:{
  click: function(){
    $(this).rotate({
      angle: 0,
      animateTo:180
      })
    }
  }
});
           });

3.按一下繞有中心點180度轉

$(document).ready(function(){
         $("#img").rotate({bind:{
  click: function(){
    $(this).rotate({
      angle: 0,
      center: ["50%", "100%"],
      animateTo:180
      })
    }
  }
});
           });

4.設定轉速

$(document).ready(function(){
         $("#img").rotate({bind:{
  click: function(){
    $(this).rotate({
      duration:6000, //速度
      angle: 0, //角度逆時鐘
      animateTo:180 //角度順時鐘
      })
    }
  }
});
           });

5.按著圖片就旋轉，放掉就轉回。

$(document).ready(function(){
        $("#img").rotate({bind:{
  click: function(){
    $(this).rotate({
      angle: 0,
      animateTo:180,
      easing: $.easing.easeInOutElastic
      })
    }
  }
});
           });

6.轉一圈就執行

$(document).ready(function(){
        $("#img").rotate({bind:{
  click: function(){
    $(this).rotate({
      angle: 0,
      animateTo:180,
      callback: function(){   alert(1)  }
      })
    }
  }
});
           });

7.圖按一下執行

$(document).ready(function(){
       $("#img").rotate({
  angle: 45,
    bind: {
      click : function(){
      alert($(this).getRotateAngle());
    }
  }
});
           });

8.先設定轉圈速度，在設定那時停止

$(document).ready(function(){
      $("#img").rotate({
  bind: {
    click: function(){
      $("#img").rotate({
        angle: 0,
        animateTo: 180,
        duration: 6000
      });
      setTimeout(function(){
        $("#img").stopRotate();
      }, 500);
    }
  }
});
           });

9.滑鼠移動就執行轉圈

$(document).ready(function(){
      $("#img").rotate({
  bind:
  {
    mouseover : function() {
    $(this).rotate({animateTo:180})
  },
  mouseout : function() {
    $(this).rotate({animateTo:0})
    }
  }

});
           });

10.正常設定速度轉圈

$(document).ready(function(){
      var angle = 0;
  setInterval(function(){
    angle+=1;
  $("#img").rotate(angle);
  },10);
           });

11.轉圈停一下又轉圈( 重複動作 )

$(document).ready(function(){
      var rotation = function (){
  $("#img").rotate({
    angle:0,
    animateTo:360,
    callback: rotation
  });
}
rotation();
           });

12.一直轉360度 (easing意思缓解)

$(document).ready(function(){
      var rotation = function (){
  $("#img").rotate({
    angle:0,
    animateTo:360,
    callback: rotation,
    easing: function (x,t,b,c,d){        // t: current time, b: begInnIng value, c: change In value, d: duration
      return c*(t/d)+b;
    }
  });
}
rotation();
           });

13.按一下轉180度在跳回去

 $(document).ready(function(){
      $("#img").rotate({
  bind:
  {
    click: function(){
      $(this).rotate({ angle:0,animateTo:180,easing: $.easing.easeInOutExpo })
    }
  }

});
           });

14.按一下就轉90度再按一下又轉90度

$(document).ready(function(){
     var value = 0
$("#img").rotate({
  bind:
  {
    click: function(){
      value +=90;
      $(this).rotate({ animateTo:value})
    }
  }
});
           });