jquery melaksanakan kaedah memaparkan kotak gesaan apabila tetikus meluncur ke atas it

jquery melaksanakan kaedah memaparkan kotak gesaan apabila tetikus meluncur ke atas it_jquery

WBOY

Lepaskan： 2016-05-16 16:15:38

asal

1485 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jquery melaksanakan paparan kotak gesaan apabila tetikus meluncur ke atas. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

1. Contoh kotak gesaan jquery dipaparkan apabila tetikus meluncur ke atas

1. Memaparkan

2. Kod pelaksanaan (anda perlu menambah jquery.js, imej butang dan imej kotak gesaan sendiri)

Kod HTML

Salin kod Kod adalah seperti berikut:

Tuding Menu Animasi 1

2. Contoh 2 kotak gesaan jquery dipaparkan apabila tetikus meluncur ke atas

Apabila tetikus bergerak ke atas nama pengguna, div akan dipaparkan di sudut kanan bawah tetikus untuk memaparkan maklumat pengguna

1. Memaparkan

2. Kaedah pelaksanaan

Hanya terdapat tiga bahagian besar Satu ialah kedudukan div, yang merupakan kesukaran utama kesan; iaitu apabila tetikus berlalu dan tetikus pergi.

3. Langkah-langkah pelaksanaan

(1) Pertama, reka gaya div untuk memaparkan maklumat pengguna Apa yang perlu diperhatikan di sini ialah kaedah ini bukan untuk mengikat div di sebelah setiap nama pengguna Ia akan dipaparkan apabila tetikus melepasinya dan tersembunyi apabila tetikus pergi. Hanya terdapat satu div dalam halaman web yang memaparkan maklumat di mana sahaja ia perlu dipaparkan.

Kod HTML:

Salin kod Kod adalah seperti berikut:

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

(2)、相应css代码

复制代码代码如下:

#blockdiv{

lebar:380px;

ketinggian:160px;

float:left;

paparan:tiada;

sempadan: 1px pepejal #ccc;  jawatan: mutlak; indeks-z: 1; kelegapan: 0.1; latar belakang: putih

}

.pic{

lebar:100px;

ketinggian:100px;

sempadan:1px pepejal #ccc;

jejari sempadan:10px; 

float:left; jidar:10px; 

limpahan:tersembunyi;

}

.kotak{

lebar:240px;

ketinggian:140px;

jidar:10px 0 10px 10px;

float:left;

limpahan:tersembunyi;limpahan-teks:ellipsis; white-space:nowrap;}

(3)、定位，为了能够精确的定位并且能够方便的调用，所以先在页面中放了中放了保存当前鼠标的坐标

复制代码代码如下:

然后用js获取当前坐标并保存到标签中：

复制代码代码如下:

jQuery(dokumen).ready(function ($) {

$(dokumen).mousemove(fungsi (e) {

 document.getElementById("pagex").value = e.pageX;//pageX() 属性是鼠标指针的位置，相对于文档的左边缘。

 document.getElementById("pagey").value = e.pageY;//pageY() 属性是鼠标指针的位置，相对于文档的上边缘。

    });

});

(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程序设计有所帮助。