jQueryで画像を重ねる

解決済

質問者：hanamogeru
質問日時：2009/09/12 23:13
回答数：1件

javascript初心者です。
複数の画像を少しずらして重ねて表示させ、下層の画像をクリックするとその画像が一番上に来るようにしたいのですが、そのようなことはjQueryでできるでしょうか？（画像でなくても何でもいいのですが・・・）
選択したものを一番上に表示させれればOKで、移動できる必要はありません。
お詳しい方が居られましたらご教授願います。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： babu_baboo
回答日時：2009/09/13 08:35

jQueryつかいではないので、おーそどっくすに。

ぜんかくくうはくは、はんかくにでもなおしてちょ！　ばぶぅ～

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title></title>

<div id="circle">ファイルは、image_0.gif から image_89.gif までよういしてね</div>

<script type="text/javascript">
//@cc_on
var max = 90;
var r = 300;
var c = {'x': 310, 'y': 400};
var n = 100;
var i, o, t;

t = document.getElementById('circle');
for(i=0; i<max; i++) {
　o = document.createElement('img');
　o.alt = 'NO_' + i;
　o.src = 'image_' + i + '.gif';
　o.style.position = 'absolute';
　o.style.top = (c.y - Math.cos( (i*360/max) * Math.PI / 180 ) * r)|0 + 'px';
　o.style.left = (c.x + Math.sin( (i*360/max) * Math.PI / 180 ) * r)|0 + 'px';
　o.style.width = n + 'px';
　o.style.height = n + 'px';
　o.style.zIndex = '0';
　t.appendChild(o);
}
o = o.cloneNode(true);
o.id = o.alt = 'CenterImage';
o.style.top = (c.y - n*1.5 + n/2) + 'px';
o.style.left = (c.x - n*1.5 + n/2) + 'px';
o.style.width = n*3+'px';
o.style.height = n*3+'px';
t.appendChild(o);

document./*@if (1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/
　'click', (function () {
　　var memory = null;
　　return function (evt) {
　　　var e　= evt./*@if (1) srcElement @else@*/ target /*@end@*/;
　　　if( 'IMG' === e.nodeName && 'circle' === e.parentNode.id) {
　　　　if ('CenterImage' == e.id) return;
　　　　if( memory ) {
　　　　　memory.style.zIndex = '0';
　　　　　memory = null;
　　　　}
　　　　e.style.zIndex = '1';
　　　　document.getElementById('CenterImage').src = e.src;
　　　　document.getElementById('CenterImage').alt = e.alt;
　　　　memory = e;
　　　}
　　};
　})(), false);

</script>