prototype.jsにはDOMを操作する為のメソッドが多数追加されているが
document.insert(Element);
は簡単なメソッドでこの場合は'document'内に'Element'を追加する。
他にも
$('content').insert(new Element('div'));
こんな書き方も出来る。
あと、例えば以下のようなドキュメントがあったとして
<div id="wrapper"> <div class="move">1</div> <div class="move">2</div> <div class="move">3</div> <div class="move">4</div> <div class="move">5</div> </div>
これに対して
$('wrapper').insert($$('.move')[0])
こうしてやると状態が書き変わって
<div id="wrapper"> <div class="move">2</div> <div class="move">3</div> <div class="move">4</div> <div class="move">5</div> <div class="move">1</div> </div>
と、こんな状態になる。
一番上にあったDIVが最後になっている。
これは、insertメソッドのデフォルトの動作が基準になる要素(コンテナになる要素、この場合は'wrapper')の末尾に追加する仕様だからだ。他にも先頭にしたりコンテナ要素の前にしたり後ろにしたり出来る。
しかも上の例では元々あったオブジェクトを再追加している。
実際FireBugやsafariのWebインスペクタを使って上の
$('wrapper').insert($$('.move')[0])
を呼び出すだけでリアルタイムで確認が出来る。
そして、もちろんDIV以外の要素(例えば写真等)に対しても呼び出せるのでタイマーオブジェクトの中で上のメソッドを呼び出すだけで写真の並びを循環させる事が出来る
以下のコードは、まず数枚の写真をページ内の中央に楕円上に整列させ1秒ごとにメソッドを呼び出し、先頭にあった写真を最後尾に持ってってる
下にある'click'をクリックすると実際の動作が確認できる。
document.observe('dom:loaded', function(event) {
$('click').observe('click', function(event) {
event.stop();
event.element().stopObserving();
event.element().setStyle({
cursor: 'default',
'text-decoration': 'none'
});
var elems = $$('img');
var centerX = document.viewport.getWidth() / 2;
var centerY = (document.viewport.getHeight() / 2) + document.viewport.getScrollOffsets()[1];
var screenZ = 100;
var centerZ = 300;
var radius = 200;
var angle = 0;
var interval = Math.PI * 2 / elems.length;
var srcWidth = parseInt(elems[0].getStyle('width'));
var srcHeight = parseInt(elems[0].getStyle('height'));
var zIndex = 0;
var f = function() {
elems = $$('img');
for (var i = 0; i < elems.length; i++) {
if (i < elems.length / 2) zIndex--;
var x = centerX + radius / 4 * Math.cos(angle);
var y = centerY - radius * Math.sin(angle);
var z = centerZ - radius * Math.cos(angle);
var depth = screenZ / z;
var width = srcWidth * depth;
var height = srcHeight * depth;
elems[i].setStyle({
'top': (y - (height / 2)) + 'px',
'left': (x - (width / 2)) + 'px',
'width': width + 'px',
'height': height + 'px',
'zIndex': zIndex
});
angle += interval;
}
}
var timeId = setInterval(function() {
f();
elems[0].up().insert(elems[0]);
},1000);
});
});
click
実際のページ制作でこれを使う事はまあ、ないだろうが。
ちなみにJQueryではinsertではなくappendだ
カテゴリ:
トラックバック(0)
トラックバックURL: http://blog.beanz-net.jp/beanz_mtos/mt-tb.cgi/75
コメントする