jquery implémente la méthode d'affichage d'une boîte de dialogue lorsque la souris glisse dessus it_jquery

L'exemple de cet article décrit la méthode jquery pour afficher une boîte de dialogue lorsque la souris glisse dessus. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

1. Exemple de boîte d'invite jquery affichée lorsque la souris glisse sur

1. Rendu

2. Code d'implémentation (vous devez ajouter vous-même jquery.js, des images de boutons et des images de boîte d'invite)

Code HTML

Copier le code Le code est le suivant :

Survol du menu animé 1

• 
  Mur de concepteur Web Un mur d'idées de design, de tendances Web et de tutoriels
  


• 
  Meilleure galerie Web
  Avec les meilleurs sites Web CSS et Flash
  


• 
  N.Design Studio
  Blog et portfolio de conception du designer WDW, Nick La
  

2. Exemple 2 de boîte d'invite jquery affichée lorsque la souris glisse sur

Lorsque la souris passe sur le nom de l'utilisateur, un div s'affichera dans le coin inférieur droit de la souris pour afficher les informations de l'utilisateur

1. Rendu

2. Méthode de mise en œuvre

Il n'y a que trois grandes parties. L'une est le positionnement du div, qui est la principale difficulté de l'effet ; la seconde est le chargement asynchrone des données via ajax ; la troisième est d'utiliser les deux attributs js onmouseover et onmouseout, c'est-à-dire lorsque la souris passe et s'éloigne.

3. Étapes de mise en œuvre

(1) Tout d'abord, concevez le style du div pour afficher les informations utilisateur. Ce qu'il convient de noter ici, c'est que cette méthode ne consiste pas à lier un div à côté de chaque nom d'utilisateur. Il sera affiché lorsque la souris passera dessus. et masqué lorsque la souris part. Il n'y a qu'un seul div dans la page Web qui affiche les informations. Il est positionné là où il doit être affiché. Pour ce faire, vous devez définir la méthode de positionnement du div sur le positionnement absolu.

Code HTML :

Copier le code Le code est le suivant :

 

 
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
 

用户名：
真实姓名：
性别：
所属地区：
邮箱：

 

正在加载中...

   

(2)、相应css代码

复制代码 代码如下 :

#blockdiv{
largeur:380px;
hauteur:160px;
float:gauche;
affichage : aucun ;
bordure : 1px solide #ccc ;  position : absolue ; indice z : 1 ; opacité : 0,1 ; fond : blanc
>
.pic{
largeur:100px;
hauteur:100px;
border:1px solide #ccc;
rayon de bordure : 10 px ;
flotteur : gauche ; marge : 10 px ;
débordement : masqué ;
>
.box{
largeur:240px;
hauteur:140px;
marge:10px 0 10px 10px;
float:gauche;
débordement: caché; texte-débordement: points de suspension; espace blanc: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() est disponible en anglais.
    });
});

(4)、鼠标经过和离开事件js代码

复制代码 代码如下 :

fonction ShowInfo(nom d'utilisateur) {
$("#blockdiv").css({
 "display": "bloquer",
 "gauche": document.getElementById('pagex').value,
 "top": document.getElementById('pagey').value,
});
$("#messagediv").css("display", "block");
$.getJSON("../ashx/GetUserInfo。ashx?name=" nom d'utilisateur,
 fonction (données) {
     si (données != 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));
  >
  sinon {
      $("#imguserhead").attr("src", "../../Users/images/900.png");
  >
  $("#messagediv").css("display", "none");
     >
     d'autre
  $("#messagediv").html("未加载到数据!");
 });
>
fonction HiddenInfo() {
    $("#blockdiv").css({
 "affichage": "aucun",
    });

    $("#lblusername").html("")
    $("#lblrealname").html("");
    $("#sexe").html("");
    $("#lbladdress").html("")
    $("#lblemall").html("");
>

(5)、调用

复制代码 代码如下 :

')" onmouseout="HiddenInfo()">
jquery鼠标滑过显示提示框

希望本文所述对大家的jQuery程序设计有所帮助。