常にループする必要があるので、それなりに 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)の最新記事】
- jQuery の回転アニメーション / $({kakudo: 0}).animate(properties, options )
- HTML 上のデータをローカルに保存する jQuery プラグイン
- jQuery のプラグインで動的なコントロールの処理を作成 : add_button / set_event / set_link
- TD 内のテキストを入力可能にする tableinput.js / jQuery プラグイン
- スマホとPC で別の処理を記述できる jQuery のストリートビュープラグイン
- jQuery のプラグインとしてストリートビューを利用する
- jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )
- INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン
- jQuery のプラグイン作成 : 要素のクリックイベントで、画像の実際の縦横サイズちょうどの大きさのウインドウを開いて表示する
- jQuery を使ったCSS 一括エフェクトアニメーション( rotate, skew, borderRadius, boxShadow )
- jQuery : IFRAME 作成プラグインと、アニメーションによる表示切替
- jQuery でかなり実用的かもしれない入力制限( 入力値復帰型 )
- jQuery で、指定文字集合のみ入力可能なプラグイン
- jQuery の fn.extend メソッドと extend メソッド の違いは $(セレクタ) のメソッドとして実行できるかどうか ( extend の仕様について )
