フレンドリストのフレンドのアバター上にマウスを移動したときにデータカードを表示するエフェクトをJSで実装_javascriptスキル

プロジェクトのニーズに基づいて、次のページ効果を作成する必要があります。ユーザーのマウスが友達リスト内の友達のアバターの上を通過すると、友達の基本情報が表示されます。これは実際には同様の機能ですQQ クライアントに送信します。

インターネット上で多くのコードを見つけましたが、基本的には、マウスをホバーすると div がポップアップし、そこから離れるとすぐに消えることを認識しています。この効果を実現する純粋な CSS コードもいくつかありますが、私にとって必要なのは JS であり (データは Ajax 経由で取得する必要があるため)、マウスが離れた直後に非表示にすることはできません。この部門の入り口にあります。このページの効果には丸 1 日かかりました。これは、私の JS と CSS のスキルを向上させる必要があることを示しています...

長い間探した結果、次の 2 つの実現可能なアイデアを見つけました。これらの 2 つの方法の例は私が書いたものではなく、ここで共有したいと思います。 >デモアドレス。私の方法は方法Bの考え方を参考にしています。

方法 A:

フローティング div とトリガー要素 a を同じ親要素に配置し、マウスが親要素の上を通過したときに表示をトリガーします。このようにして、マウスが div に移動しても、マウスは依然として親要素内にあり、div は非表示になりません。

方法 B:

マウスが a を通過すると、div がポップアップします。マウスが a から離れると、div を閉じるタイマーを設定します。マウスが div に移動すると、タイマーはクリアされます。

————————————————————————————————————————————————— —————————————————————

私の方法は、上記の方法 B のアイデアに基づいており、ユーザーがイベントをトリガーした画像から離れると、ユーザーは 3 秒の遅延後にデータ カード div を閉じます。対応する操作 ユーザーがその他をクリックしたとき 友人の画像が表示されると、直前に開いたタイミング div を閉じるために、hidden メソッドがすぐに呼び出されます。

私のメソッドの JS コードは以下のとおりです:

//显示资料卡 
var beforeId; //定义全局变量 
function showInfoCard(thisObj,id){ 
this.hidden(beforeId); //立刻隐藏前一个选中弹出来的div 
beforeId = id; 
// alert(id); 
// var d = $(thisObj); 
// var pos = d.offset(); 
// var t = pos.top + d.height() - 5; // 弹出框的上边位置 
// var l = pos.left - d.width() - 600; // 弹出框的左边位置 
// $("#"+id).css({ "top": t, "left": l }).show(); 
// 

var objDiv = $("#"+id); 

$(objDiv).css("display","block"); 

$(objDiv).css("left", event.clientX-280); //弹出框的位置X值 

$(objDiv).css("top", event.clientY-10); //弹出框位置Y值 
} 
function hideInfoCard(id){ //隐藏div 
//延时3秒 
setTimeout('hidden('+id+')',3000); 
} 

function hidden(id){ 
$("#"+id).hide(); 
}

HTML 内の非表示の div コード スニペットは次のとおりです:

<div id="id" style="display:none; width:250px; height:150px; background-color:#D1EEEE;position:absolute;"></div>

HTML では、showInfoCard メソッドと HideInfoCard メソッドを呼び出し、次のステートメントを使用してマウス イベントをリッスンする必要があります:

onmouseover="showInfoCard(this,'${friend.friendId}')" onmouseout="hideInfoCard('${friend.friendId}')" 

これらは動的コード スニペットです。使用する場合は、jquery.js フレームワークを導入する必要があります。もちろん、純粋な JS に変更することもできます。以上で完了です。AJAX が情報を取得し、JS を使用して上記 div に HTML コードを挿入して表示を完了します。これは非常に見苦しいです...