本文實例講述了jquery實作滑鼠滑過顯示提示框的方法。分享給大家供大家參考。具體如下：
一、jquery滑鼠滑過顯示提示框實例
1、效果圖
2、實作程式碼 ( 需自行加入 jquery.js、按鈕圖片、提示框圖片 )
HTML 代碼
二、jquery滑鼠滑過顯示提示框實例二
滑鼠劃過使用者名稱時，在滑鼠右下角顯示div展示使用者資料這個效果
1、效果圖
2、實作方式
無非就三大塊，一個是div的定位，這個是這個效果的主要困難；二個是透過ajax非同步載入資料；第三個就是要用到兩個js屬性onmouseover和onmouseout，也就是滑鼠經過和滑鼠離開。
3.實現步驟
(1)、先設計好要顯示使用者資料的div的樣式, 這裡要注意的該方法不是給每個使用者名稱的旁邊都綁定一個div，當滑鼠經過時顯示，滑鼠離開時隱藏，網頁裡就一個顯示訊息的div，哪裡需要顯示時就定位在哪裡，這要就需要把該div的定位方式設定為絕對定位。
HTML程式碼：
使用者名稱： |
|
真實姓名： |
|
性別： |
標籤>
|
所屬地區： |
|
信箱： |
|
表>
正在載入中...
(2)、對應的css程式碼
#blockdiv{
寬度：380px；
高度：160px；
浮動：左；
顯示：無；
邊框：1px實心#ccc； 位置：絕對； z 索引：1；不透明度：0.1；背景：白色
}
.pic{
寬度：100px；
高度：100px；
邊框：1px實心#ccc;
邊框半徑：10px；
浮動：左；邊距：10px；
溢出：隱藏；
}
.box{
寬度：240px；
高度：140px；
邊距：10px 0 10px 10px;
浮動：左；
溢位：隱藏；文字溢位：省略號；空白：nowrap;}
(3)、定位，為了能夠準確的定位並且能夠方便的調用，所以先在頁面中放了兩個標籤，分別用於保存當前滑鼠的座標
然後用js取得目前座標並儲存到標籤中：
jQuery(document).ready(function ($) {
$(document).mousemove(function (e) {
document.getElementById("pagex").value = e.pageX;//pageX() 屬性是滑鼠指標的位置，相對於文件的左邊緣。
document.getElementById("pagey").value = e.pageY;//pageY() 屬性是滑鼠指標的位置，相對於文件的上緣。
});
});
(4)、滑鼠經過並離開事件js程式碼
function ShowInfo(使用者名稱) {
$("#blockdiv").css({
"顯示": "阻止",
"left": document.getElementById('pagex').value,
"top": document.getElementById('pagey').value,
});
$("#messagediv").css("顯示", "區塊");
$.getJSON("../ashx/GetUserInfo。ashx?name=" 使用者名稱,
函數（資料）{
if (資料!= null) {
$("#lblusername").html(data[0].User_Count)
$("#lblrealname").html(data[0].User_name);
$("#sex").html(data[0].User_Sex);
$("#lbladdress").html(data[0].User_Address)
$("#lblemall").html(data[0].User_Email);
if (data[0].User_HeadImg != null&&data[0].User_HeadImg != "") {
$("#imguserhead").attr("src", "../../Users/" data[0].User_HeadImg.toString().substring(3));
}
否則{
$("#imguserhead").attr("src", "../../Users/images/900.png");
}
$("#messagediv").css("顯示", "無");
}
其他
$("#messagediv").html("未載入到資料！");
});
}
函數 HiddenInfo() {
$("#blockdiv").css({
"顯示": "無",
});
$("#lblusername").html("")
$("#lblrealname").html("");
$("#sex").html("");
$("#lbladdress").html("")
$("#lblemall").html("");
}
(5)、呼叫
希望本文對大家介紹的 jQuery 程式設計有所幫助。
