- ベストアンサー
jQueryで画像を重ねる
javascript初心者です。 複数の画像を少しずらして重ねて表示させ、下層の画像をクリックするとその画像が一番上に来るようにしたいのですが、そのようなことはjQueryでできるでしょうか？（画像でなくても何でもいいのですが・・・） 選択したものを一番上に表示させれればOKで、移動できる必要はありません。 お詳しい方が居られましたらご教授願います。
- hanamogeru
- お礼率78% (294/375)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
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>
お礼
ありがとうございます。