SQLの窓

2014年03月17日


jQuery の回転アニメーション / $({kakudo: 0}).animate(properties, options )

jQuery の animate メソッドに渡せるのは、数値表現のプロパティのみなので、使えるものはほとんどありません。例えば、回転処理なんかもそのうちの一つですが、この方法を使えばどんなものでもアニメーション化できます。

この方法を解説していたのは、やはり、stackoverflow( CSS rotation cross browser with jquery.animate() ) でした

このソースでちょっと解りにくいのが、$({kakudo: 0}) の部分ですが、なんの事は無く {kakudo: 0} という超シンプルなオブジェクトに対してアニメーション処理をしようというわけで、このオブジェクトは当然 kakudo プロパティ を持っているので、step イベントが 0 度から 指定角度までの間呼ばれ続けるわけです。

それを利用した単純な繰り返し処理です。

その結果、いとも簡単にページ全体の回転処理を作成する事ができました。





<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
$.fn.extend({ 
	rotateAction: function(deg, duration, easing){
		var target = this;
		$({kakudo: 0}).animate(
			{kakudo: deg},
			{
				duration: duration,
				easing: easing,
				step: function(now) {
					target.css({
						transform: 'rotate(' + now + 'deg)'
					});
				}
			}
		);
	}  
});

</script>

<input type="button" value="画像回転" onclick='$("#target").rotateAction(360,1000,"swing");'>
<br>
<input type="button" value="全て回転" onclick='$(document.body).rotateAction(360,5000,"swing");'>
<br><br><br>

<img id="target" src="https://lh5.googleusercontent.com/-kCYTSmTrJXs/URvMQy9ClqI/AAAAAAAARuw/5BTKTk2c_sw/s128/_img.png" style="border: solid 0px #000000" />

関連する記事


posted by lightbox at 2014-03-17 02:01 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり