2015.8.11
0からはじめるPHP#39(番外)【jQueryによる動的表示#2-オンマウス表示-】
ということで、試行錯誤を重ねてついに完成しましたので、こちらで解説しようかと思います。
当然、googleのライブラリを使います。わざわざダウンロードするほどのものでもないと思いますし。
$('.divlink').hover(
function(){
$(".divlink").mousemove(function (e) {
$(this).next().offset( { top: e.pageY+5, left: e.pageX+15 } );
$(this).next().css('display','inline');
});
},
function () {
$(this).next().css('display','none');
}
);
本体はこんな感じです。
divlinkクラスのオブジェクトにオンマウス状態になった時、上の関数が呼ばれます。で、その状態が解除されたとき、下の関数が呼ばれるわけですね。
改行しているので見づらいと思うのですが、hoverに2つの引数(クロージャ関数)があり、それぞれが対応しています。
4行目ですが、thisとnext()を使うことで"その"オブジェクトの次のオブジェクトを指定することができます。
<div class="divlink"><a class="a" href="http://jalmowhite.web.fc2.com/index.html" target="_blank">しろ☆じゃるもん</a></div> <div class="link_popup" style="none;margin-left:-9999px;float:left;"> <div class="site_name">Site Name:しろ☆じゃるもん</div> <div class="site_owner"........ .................. </div>
ソースを見れば分かると思うのですが、リンク自体はこういう構造になっています。
つまり、divlinkの兄弟オブジェクトであるlink_popupクラスのdivがここで指定されるわけですね。
それをoffset命令で移動させ、最後にそれを表示させる、といった手法です。CSSの変更は.css()でできます。そのまんまですね
さて、link_popupクラスは初期状態としてdisplayをnoneにし、さらにfloatとネガティブマージンを指定しています。
わざわざfloatとかいろいろ指定しているのにはワケがありまして、これを指定していないと移動前の場所に空白ができるんですよ。
具体的な理由は不明なんですが移動したからといって全部移動しているというわけではないみたいな感じです。ちょっとよくわかんないですね。僕もよくわかんないです。
まぁ要するに元あった場所に同サイズの空白が出現するんですよ。
これを回避するためには画面外に放り出すしかありません。
要するに見えなかったらいいんです。消し去りましょう。そのためにマージンを指定して画面外に置き、floatで回りこませます。
これでOKです。
これだけの話なんですが、実はいろいろ苦労しましてね。
例えばmousemoveイベントとか関数外から勝手に呼び出されるとかちょっとよくわかんない挙動を起こしたりしてましたし。
まぁとにかく、jQueryの使い方は大体分かったんで、後は必要に応じて学習する感じでいいんじゃないかなって思います。
今はまだそんな本格的に頑張らなくていいと思うので、使い方だけ分かれば充分かなと思います。
ちなみに、こういうテンプレが用意できそうなものは全部関数化するのが良いと思います。その方が管理しやすいので。
PHPって便利ですね。ほんと。でも、Tab入れたら変な空白出来そうなんで入れてないんですが、おかげでちょっと見づらい･･････。全部echoにすればいいんですけど、それはそれで見づらいしなぁ･･････。（笑）
さて、次回から何をしましょうか。やりたいことは色々あるのですが･･････。
掲示板、作りましょうか･･････！！！！！