二、以下用法教學:
套件裡面語法:
原始設定(默認):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(45);
});
方法二:
$(document).ready(function(){
$("#img").rotate({angle:45});
});
$("#img").rotate({angle:45});
});
2.按一下旋轉180度
$(document).ready(function(){
$("#img").rotate({bind:{
click: function(){
$(this).rotate({
angle: 0,
animateTo:180
})
}
}
});
});
$("#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
})
}
}
});
});
$("#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 //角度順時鐘
})
}
}
});
});
$("#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
})
}
}
});
});
$("#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) }
})
}
}
});
});
$("#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());
}
}
});
});
$("#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);
}
}
});
});
$("#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})
}
}
$("#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);
});
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();
});
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();
});
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 })
}
}
$("#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})
}
}
});
});
var value = 0
$("#img").rotate({
bind:
{
click: function(){
value +=90;
$(this).rotate({ animateTo:value})
}
}
});
});
沒有留言:
張貼留言
影片的問題請留在影片的留言區裡。
部落格不會另外通知給我,所以很難發現你有留言。