jQuery 回転プラグイン - 回転サポート (つまり、Firefox/SafariOpera/Chrome)_jquery

非常に興味深い jQuery 回転プラグインをインターネットで見つけました。これは Internet Explorer 6.0、Firefox 2.0、Safari 3、Opera 9 をサポートしており、Transform は高度なブラウザーで使用され、VML は下位バージョンで使用されます。 IEの。

呼び出しとメソッド:

rotate(angle)

angle パラメータ: [数値] - デフォルトは 0 - 指定された値に従って画像を回転します角度

例:

コードをコピー コードは次のとおりです:

$("# img").rotate(45);

rotate(parameters)

parameters パラメータ: [オブジェクト] 回転パラメータを含むオブジェクト。サポートされる属性:
1.angle 属性 : [数値] - デフォルト 0 - 回転角度の数、すぐに実行
例:

コードをコピー コードは次のとおりです:

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

2.bind 属性: [オブジェクト] オブジェクト。回転オブジェクトにバインドされたイベントが含まれます。イベント内の $(this) は回転オブジェクトを指しているため、$(this).rotate(…) 内で呼び出しを連鎖させることができます。例 (矢印をクリック):

コードをコピー コードは次のとおりです:

$ ("#img ").rotate({bind:{

click: function(){

$(this).rotate({

angle: 0,

animateTo:180
})
}
}
});

3.animateTo 属性: [数値] – デフォルト 0 – 現在の角度値から指定された角度値 (または指定された角度パラメータ) までの回転をアニメーション化します。 例: 上記の例と併せて、使用法を参照してください。
4.duration 属性 : [数値] – animateTo を使用してアニメーションの実行時間を指定します。例:

コピー。 code コードは次のとおりです:

$("#img").rotate({bind:{
click: function(){
$(this ).rotate({
duration:6000,
angle: 0,
animateTo:100
})
}
}
});

5.step 属性: [関数] – 現在の角度値を関数
6 の最初のパラメーターとして、各アニメーション ステップで実行されるコールバック関数。イージング属性: [関数] – デフォルト (下記を参照) – アニメーションをより自然に見せるために使用されるイージング関数。http://gsgd からのイージングをサポートするために 5 つのパラメーター (x、t、b、c、d) が必要です。 .co.uk/sandbox/jquery/easing/ (詳細については、Web サイトのドキュメントを参照してください)。jQueryRotate!Default 関数でイージング プラグインを含めることを忘れないでください:

コードをコピー コードは次のとおりです:

function (x, t, b, c, d) { return -c * ((t=t /d-1)* t*t*t - 1) b; }

ここで: t: 現在の時刻、
b: 開始値、
c: 変更値、
d: 期間、
x: 未使用
イージングなし (線形イージング):

コードをコピーコードは次のとおりです。

function(x, t, b, c, d) { return (t/d)*c; }

例 (クリックします) arrow):

コードをコピー コードは次のとおりです:

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

7. コールバック属性 : [機能] コールバック関数は、アニメーションが完了しました (矢印をクリック):

コードをコピーします コードは次のとおりです:

$("#img").rotate({bind:{
click: function(){
$(this).rotate({
angle: 0,
animateTo:180 、
コールバック: function(){alert(1) }
} )
}
}
});

getRotateAngle

この関数は、回転されたオブジェクトの現在の角度を返すだけです。

例:

コードをコピー コードは次のとおりです:

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

stopRotate

この関数は、進行中の回転アニメーションを停止するだけです。

例:

コードをコピー コードは次のとおりです:

$("#img").rotate({
バインド: {
クリック: function(){
$("#img").rotate({
角度: 0,
animateTo: 180,
duration: 6000
});
setTimeout(function(){
$("#img").stopRotate();
}, }
}
});

これを使用して、回転に関連する多くの Web ページの特殊効果を実現します。これを使用して大きな宝くじホイールを作成しました。効果は良好です。 , でも、フラッシュほど滑らかではなく、基本的には実行できます（笑）。

jqueryrotate プロジェクトのアドレス: http://code.google.com/p/jqueryrotate/

コード例: http://code.google.com/p/jqueryrotate/wiki/Examples

一歩ずつ登っていきます