JS實現(xiàn)鼠標經(jīng)過好友列表中的好友頭像時顯示資料卡的效果
基于項目的需要，需要制作出如下的一種頁面效果：當用戶鼠標經(jīng)過好友列表中好友頭像時，顯示該好友的基本資料，其實也就是類似QQ客戶端的那種功能。
網(wǎng)上找了很多代碼，基本都實現(xiàn)了鼠標懸浮之后彈出div，離開之后馬上就消失了。還有些純CSS的代碼實現(xiàn)了這樣的效果，但是對我沒用，我需要的是JS的（因為我的數(shù)據(jù)還要通過Ajax取得），并且鼠標離開后不能馬上隱藏，這個div上還有功能入口。這個頁面效果折騰了我一天，由此可見我的JS和CSS技術(shù)有待提高...
搜索了好久，終于發(fā)現(xiàn)了可行的2個思路如下，這2個方法有個例子，不是我寫的，我也沒用到，轉(zhuǎn)過來分享一下，演示地址。我的方法參考了方法B的思路。
方法A：
把浮動div和觸發(fā)元素a放于同一個父級元素內(nèi)，鼠標經(jīng)過父級元素時觸發(fā)顯示。這樣鼠標移動到div時仍然 處于該父級元素內(nèi)，則div不會隱藏。
方法B：
鼠標經(jīng)過a時彈出div，鼠標離開a時設(shè)置一個計時器用來關(guān)閉div，如果鼠標移動到div后則清除計時器。
—————————————————————————————————————————————————————————————————————————————
我這個方法就是采用了上面方法B的思想，當用戶離開觸發(fā)事件的圖像后，資料卡div要延時3秒才后關(guān)閉，用戶擁有足夠的時間進行相應(yīng)的操作，當用戶點擊其他好友圖像時，則會立刻調(diào)用hidden方法，將之前的打開正在計時的div關(guān)閉。
下面給出我的方法的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中，需要調(diào)用showInfoCard和hideInfoCard方法，使用以下語句監(jiān)聽鼠標事件：
onmouseover="showInfoCard(this,'${friend.friendId}')" onmouseout="hideInfoCard('${friend.friendId}')"
這些都是動態(tài)的代碼片段，采用的時候需要引入jquery.js框架，當然也可以修改成純JS的。上面的完成了，AJAX取得信息，然后利用JS在上面div中插入HTML代碼即可完成顯示，最后來張初步的效果圖，挺丑的...
- JS實現(xiàn)側(cè)邊欄鼠標經(jīng)過彈出框+緩沖效果
- js鼠標經(jīng)過tab選項卡時實現(xiàn)切換延遲
- 原生態(tài)js,鼠標按下后,經(jīng)過了那些單元格的簡單實例
- JS+CSS實現(xiàn)鼠標經(jīng)過彈出一個DIV框完整實例(帶緩沖動畫漸變效果)
- js實現(xiàn)鼠標經(jīng)過表格行變色的方法
- js實現(xiàn)鼠標經(jīng)過時圖片滾動停止的方法
- 鼠標經(jīng)過顯示二級菜單js特效
- javascript學習筆記（二） 鼠標經(jīng)過時，改變div塊的背景色的代碼
- Javascript實現(xiàn)的鼠標經(jīng)過時播放聲音
- js實現(xiàn)圖片顯示局部，鼠標經(jīng)過顯示全部的效果
- vue實現(xiàn)鼠標經(jīng)過動畫
相關(guān)文章
JavaScript代碼實現(xiàn)春晚劉謙魔術(shù)的模擬程序
昨晚春晚上劉謙的兩個魔術(shù)表演都非常精彩,尤其是第二個魔術(shù),他演繹了經(jīng)典的約瑟夫環(huán)問題！約瑟夫環(huán)是一個經(jīng)典的數(shù)學問題,本文給出了完整的 JavaScript 代碼實現(xiàn),感興趣的同學可以自己動手實現(xiàn)一下2024-02-02
JavaScript重定向URL參數(shù)的兩種方法小結(jié)
關(guān)于JavaScript重定向URL參數(shù)的實現(xiàn)方法網(wǎng)站有很多，這篇文章的主要內(nèi)容是從網(wǎng)上查找，并進行了修改，簡單粗暴的實現(xiàn)使用JavaScript重置url參數(shù)，文中給出了詳細的示例代碼和調(diào)用代碼，對大家的理解和學習很有幫助，感興趣的朋友們下面來一起看看吧。2016-10-10
本文主要介紹了js獲取Element元素的四種常用方法,通過介紹getElementById、getElementsByClassName、getElementsByTagName和querySelector等方法,幫助讀者了解如何通過不同的方式獲取頁面中的元素,感興趣的可以了解一下2023-08-08
在不少的網(wǎng)站使用了這種技術(shù)，一般就是兩邊的一些三個小塊排一起的廣告。2009-06-06
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)倒計時功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
JavaScript判斷訪問的來源是手機還是電腦,用的哪種瀏覽器
這篇文章主要介紹了使用JavaScript判斷訪問的來源是手機還是電腦,用的哪種瀏覽器。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
js實現(xiàn)一個省市區(qū)三級聯(lián)動選擇框代碼分享
省市區(qū)三級聯(lián)動在填寫表單時有關(guān)地址這一塊顯得尤為重要,直接提高了用戶的填寫速度與準確度，接下來本文使用js代碼實現(xiàn)一個，感興趣的你可以參考下希望可以幫助到你2013-03-03
JS中的THIS和WINDOW.EVENT.SRCELEMENT詳解
對于js初學著必須理解this和srcElement的應(yīng)用，這也是面試中經(jīng)常考到的。下面我們就通過幾個示例來詳細了解下2015-05-05
Javascript中使用parseInt函數(shù)需要注意的問題
這篇文章主要介紹了Javascript中使用parseInt函數(shù)需要注意的問題,本文講解了parseInt函數(shù)在IE8下可能會返回0值的兼容問題解決方法,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了ES6 Promise對象的含義和基本用法,結(jié)合實例形式分析了Promise的含義、功能、基本用法及相關(guān)操作注意事項,需要的朋友可以參考下2019-06-06