jquery implements the method of displaying a prompt box when the mouse slides over it_jquery

The example in this article describes the jquery method of displaying a prompt box when the mouse slides over it. Share it with everyone for your reference. The details are as follows:

1. Example of jquery prompt box displayed when the mouse slides over

1. Rendering

2. Implementation code (you need to add jquery.js, button images, and prompt box images by yourself)

HTML code

Copy code The code is as follows:

• 
  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
  

2. Example 2 of jquery prompt box displayed when the mouse slides over

When the mouse moves over the user name, a div will be displayed in the lower right corner of the mouse to display the user information

1. Rendering

2. Implementation method

There are only three big parts. One is the positioning of the div, which is the main difficulty of the effect; the second is asynchronous loading of data through ajax; the third is to use the two js attributes onmouseover and onmouseout, that is, when the mouse passes and mouse away.

3. Implementation steps

(1) First, design the style of the div to display user information. What should be noted here is that this method is not to bind a div next to each user name. It will be displayed when the mouse passes over it and hidden when the mouse leaves. There is only one div in the web page that displays information. It is positioned wherever it needs to be displayed. To do this, you need to set the positioning method of the div to absolute positioning.

HTML code:

Copy code The code is as follows:

 

 
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
 

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

 

正在加载中...

   

(2)、相应css代码

复制代码 代码如下:

#blockdiv{
width:380px;
height:160px;
float:left;
display:none;
border: 1px solid #ccc;  position: absolute; z-index: 1; opacity: 0.1; background: white
}
.pic{
width:100px;
height:100px;
border:1px solid #ccc;
border-radius:10px;
float:left; margin:10px;
overflow:hidden;
}
.box{
width:240px;
height:140px;
margin:10px 0 10px 10px;
float:left;
overflow:hidden;text-overflow:ellipsis; white-space: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(username) {
$("#blockdiv").css({
 "display": "block",
 "left": document.getElementById('pagex').value,
 "top": document.getElementById('pagey').value,
});
$("#messagediv").css("display", "block");
$.getJSON("../ashx/GetUserInfo。ashx?name=" username,
 function (data) {
     if (data != 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));
  }
  else {
      $("#imguserhead").attr("src", "../../Users/images/900.png");
  }
  $("#messagediv").css("display", "none");
     }
     else
  $("#messagediv").html("未加载到数据!");
 });
}
function HiddenInfo() {
    $("#blockdiv").css({
 "display": "none",
    });

    $("#lblusername").html("")
    $("#lblrealname").html("");
    $("#sex").html("");
    $("#lbladdress").html("")
    $("#lblemall").html("");
}

(5)、调用

复制代码 代码如下:

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

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