リンゴの水やり？(はてな)

■[JavaScript]みたび、くるくるバナー

中島さんのiAnimeをいつか試してみたいと思っていて、時間がたっぷり*1空いてるので少し触ってみました。

発想が貧困なので、こんなカッコいいのは出来ませんが、手始めに以前やったくるくるバナーで。

出来たのはこれ(↓)。ほとんど中島さんのスライドショーそのままです。

くるくるバナー3

シーケンスの指定で、次のバナーをfadeinで表示させていますが、直前のshowで一旦visibleにすると、バナーのサイズが異なるため、小さなバナーから大きなバナーを表示する時に一瞬だけ次のバナーが透過率100%で表示されてしまい、ちらつく感じになりました。

{id:'banner'+i, effect:'show'},
{id:'banner'+i, effect:'fadein', duration:2000},

これは勘で、iAnime.effects.showを置換えれば良いだろうという事で、適当に下の様にしてうまくいきました。

iAnime.effects.show=function(F,E,D,G){this.move(F,E,D,G);iBrowse.setOpacity(F,E);F.style.visibility="visible"};

うまく出来ない事が2点有り、もし解決策がありましたらコメントもらえるとありがたいです。

1. 最初に全部のバナーが一瞬表示されてしまう。
   hideAll()で非表示にしてますが、この間に表示されてしまいます。*2div id="main"をhiddenにして後から"visible"にすれば良いと思いましたが、エラーが出てうまく出来ませんでした。
2. バナーをブロック内のセンターに表示したい。
   スタイルシートで出来ると思いますが、詳しくないので。

下のページを参考にしましたがうまくいきませんでした。

http://www.mozilla.gr.jp/standards/webtips0004.html

半日かかりましたが、慣れるとiAnimeを使えば簡単に出来そうな気がします。テンプレートを使ってhtmlを部分的に置換えるというのも新鮮でした。*3

でも、やっぱりJavaScriptは苦手だ

Permalink | コメント(2) | トラックバック(0) | 12:33