SQLの窓

2014年03月18日


jQuery の回転アニメーションでくるくる回る『実行中アイコン』

常にループする必要があるので、それなりに CPU 負荷がかかります。しかし、CSS だけのアニメーションと比べて、JavaScript だから特別負荷がかかるようでは無いようです。開始と停止があれば使えるので、後は対象を何にするかだけです。これだと画像を使ったほうがよさそうな気はします。
(2014/03/18 テスト)

※ グラデーションを使った最初の DIV のほうがやや負荷が大きいようでした。
※ 最初の DIV のグラデーション指定は、IEでは IE10 以上でないとできません(IE9以前だと filter)





<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = 'https//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = 'https//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>

<style type="text/css">
#target {
	width:20px;
	height:20px;
	border:0px solid #000;
	border-radius: 50px;
	background: linear-gradient(to top, #ffffff, #999999);
	background: -webkit-linear-gradient(top, #fff, #999);
	position: relative;
}
#in_target {
	position: absolute;
	left: 5px;
	top: 5px;
	width:10px;
	height:10px;
	border:0px solid #000;
	border-radius: 10px;
	background-color: #ffffff;
}
#target2 {
	margin-left: 10px;

	border-radius: 50%;	/* 元の形状を丸くする為 */

	font-size: 18px;	/* 位置指定を em でしているので、ここを変更すると半径変更 */
	width: 5px;		/* サイズ変更 */
	height: 5px;

	/* em を使うと、font-size にサイズを連動させる事ができる */
	/* width: .25em; height: .25em; */

	/* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
	box-shadow:
		0 -.4em       0 0 rgba(50,50,50,1),
		-.28em -.28em 0 0 rgba(50,50,50,.75),
		-.4em 0       0 0 rgba(50,50,50,.50),
		-.28em .28em  0 0 rgba(50,50,50,.25)
	; 
}
</style>
<div class="loop" id="target"><div id="in_target"></div></div>
<br><br>
<div class="loop" id="target2"></div>
<br><br>

<script>
$.fn.extend({ 
	rotateStop: function(){
		this.data("stop", true);
	},
	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)'
					});
				},
				done: function() {
					if ( typeof target.data("stop") === 'undefined' || target.data("stop") === false ) {
						setTimeout(function(){target.rotateAction(deg, duration, easing)},0);
					}
					else {
						target.data("stop", false );
					}
				}
			}
		);
	}  
});

</script>

<input type="button" value="DIV回転" onclick='$(".loop").rotateAction(360,1000,"linear");'>
<input type="button" value="回転停止" onclick='$(".loop").rotateStop();'>


関連する記事


【プラグイン作成(jQuery)の最新記事】
posted by lightbox at 2014-03-18 13:15 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする
container 終わり

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

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり