jquery實作滑鼠滑過顯示提示框的方法_jquery

本文實例講述了jquery實作滑鼠滑過顯示提示框的方法。分享給大家供大家參考。具體如下：

一、jquery滑鼠滑過顯示提示框實例

1、效果圖

2、實作程式碼 ( 需自行加入  jquery.js、按鈕圖片、提示框圖片  )

HTML 代碼

複製程式碼 程式碼如下:

 
• 
    Web Designer Wall 
    A wall of design ideas, web trends, and tutorials
   

 
• 
    Best Web Gallery
    Featuring the best CSS and Flash web sites
   

 
• 
    N.Design Studio
    Blog and design portfolio of WDW designer, Nick La
   

二、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)、呼叫

複製程式碼以下程式碼：

')" onmouseout="HiddenInfo()">
jquery滑鼠滑過顯示提示框

希望本文對大家介紹的 jQuery 程式設計有所幫助。