http://www.hemidemi.com/bookmark/info/225487
このページにある「收藏」というボタンを押したら、画面中央に「loading」という画像が一瞬表示されます。この画像をどうやって真ん中に表示しているのかよくわからないので、教えてください。このページでどういう方法が使われているのかが知りたいです。
No.5
29
11
45pt
ソース流し読みなので間違っているかもしれませんが、、、
まず onBoydLoad() で以下のように busy-box のスタイルを wMarks に入れています。
29
28
box = document.getElementById("busy-box");
wMarks[0] = box.style;
で、wRefresh() で left と top を設定しています。
wRefresh は 200ms 毎にタイマで呼ばれているようです。
wMarks[x].left = posX + window.pageXOffset - width + 'px';
wMarks[x].top = posY + window.pageYOffset - height + 'px';
No.1
614
5pt
これ自体はCSSとJavaScriptで可能です。（いわゆるDHTML）
具体的には半透明なグレーのレイヤーの幅、高さを100%にして中央寄せにすればできると思います。
JavaScriptでレイヤーの表示などを行っているのだと思います。
こういった動作をするライブラリ（というか部品）もいくつか公開されているので、実装しようと思えばすぐにできるのではないでしょうか。
ありがとうございます。基本的な知識はあります。
このページの一体どこで、topとleftを設定してるのか知りたいのです。ソースを追いかけてもよくわかりませんでした。
No.2
30
5pt
Javaスクリプトでレイヤーを表示させているのだと思います。
レイヤーの使い方
http://gentzen.math.hc.keio.ac.jp/JavaScript/day11/index4.ht...
ありがとうございます。基本的な知識はあります。
このページの一体どこで、topとleftを設定してるのか知りたいのです。ソースを追いかけてもよくわかりませんでした。
No.3
614
5pt
なるほど。ソースは確かに分かりにくいですね…。
このボタンではprototype.jsのAjax.Updaterを使っているようです。
その中で、ボタンクリックしたときに、busy-boxというエレメントを表示、ロードが完了したときに非表示、ということをしています。
busy-boxは、[ソース表示]で出るソース85行目から90行目付近に書かれています。
※Ajaxのライブラリを使っているので分かりにくいですね…。
ありがとうございます。その辺もわかるのですが、onLoading で実行しているのは Element.show() だけですよね。それで何で、ウインドウ幅に合わせていつも中央に表示されるのか、わかりません。prototype.js を書き換えてるんじゃないかと念のため見ましたが、そういうこともありませんでした。
回答可能回数を３回にしました。もしおわかりになれば、是非もう一度、回答をお願いします。
No.4
614
40pt
回答回数増やしていただいてありがとうございます。
ソース流し読み程度見てみただけなので、ひょっとしたら間違ってるかもしれませんが、
クリック時にstartOverlay()が動きます。
その中でgetPageSize()でclientWindowの幅と高さなど取得→画面一杯に黒のオーバーレイをします。
で、createhintbox()でappendChildしているので、オーバーレイの属性を引き継いでいるのかな、と思いました。
ちなみに、幅と高さの取得はsetVals()という関数で行っています。
確信がないので、ポイントは結構です。
※ただ、ブラウザ毎に対応させようとしているのだと思うのですが、もっとスマートなやり方があるのになぁ、とか
onBoydLoad()とか、結構ソース汚いなぁ、とか思いました。
ありがとうございます。startOverlay() の呼び出しは onComplete だから関係ないと思います。が、関係ないので無視していた startOverlay のソースを見た結果、ついでに onBoydLoad(なんだこの名前) が目に入ったんですが、要素の中央あわせはウインドウの onload と onresize で全部やってますね。
なんか、変なかんじですが、知りたいことはわかりましたし、そのキッカケを与えて下さったので、ポイント差し上げます。ありがとうございました。
No.5
2911
ここでベストアンサー
45pt
ソース流し読みなので間違っているかもしれませんが、、、
まず onBoydLoad() で以下のように busy-box のスタイルを wMarks に入れています。
box = document.getElementById("busy-box");
wMarks[0] = box.style;
で、wRefresh() で left と top を設定しています。
wRefresh は 200ms 毎にタイマで呼ばれているようです。
wMarks[x].left = posX + window.pageXOffset - width + 'px';
wMarks[x].top = posY + window.pageYOffset - height + 'px';
あれ、wRefreshはそういう呼ばれ方か。ピンポイントな回答ですね。ありがとうございます。
1
3
あれ、wRefreshはそういう呼ばれ方か。ピンポイントな回答ですね。ありがとうございます。