jquery는 마우스가 it_jquery 위로 미끄러질 때 프롬프트 상자를 표시하는 방법을 구현합니다.

이 기사의 예에서는 마우스를 프롬프트 상자 위로 슬라이드할 때 프롬프트 상자를 표시하는 jquery 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

1. 마우스를 슬라이드할 때 표시되는 jquery 프롬프트 상자의 예

1. 렌더링

2. 구현 코드(jquery.js, 버튼 이미지, 프롬프트 상자 이미지를 직접 추가해야 함)

HTML 코드

코드 복사 코드는 다음과 같습니다.

2. 마우스를 슬라이드할 때 표시되는 jquery 프롬프트 상자의 예 2

사용자 이름 위로 마우스를 이동하면 마우스 오른쪽 하단에 사용자 정보를 표시하는 div가 표시됩니다

1. 렌더링

2. 구현 방법

큰 부분은 세 가지뿐입니다. 하나는 효과의 주요 어려움인 div의 위치 지정이고, 두 번째는 ajax를 통한 데이터의 비동기 로드이며, 세 번째는 onmouseover 및 onmouseout이라는 두 가지 js 속성을 사용하는 것입니다. 즉, 마우스가 지나가고 마우스가 멀어지는 경우입니다.

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;
오버플로:숨김;
}
.박스{
너비:240px;
높이:140px;
여백:10px 0 10px 10px;
부동:왼쪽;
오버플로:숨김;텍스트 오버플로:줄임표; 공백:nowrap;}

3) ㅋ

复代码 代码如下:

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

复제대码 代码如下:

jQuery(document).ready(function ($) {
$(document).mousemove(함수 (e) {
 document.getElementById("pagex").value = e.pageX;//pageX() 属性是鼠标指针的位置，相对于文档的左边缘。
 document.getElementById("pagey").value = e.pageY;//pageY() 属性是鼠标指针的位置, 相对于文档的上边缘。
    });
});

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

复代码 代码如下:

함수 ShowInfo(사용자 이름) {
$("#blockdiv").css({
 "디스플레이": "차단",
 "왼쪽": document.getElementById('pagex').value,
 "top": document.getElementById('pagey').value,
});
$("#messagediv").css("display", "block");
$.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("display", "none");
     }
     그 외
  $("#messagediv").html("未加载到数据!");
 });
}
함수 HiddenInfo() {
    $("#blockdiv").css({
 "디스플레이": "없음",
    });

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

(5)、调사용

复代码 代码如下:

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

希望本文所述对大家의 jQuery는 매우 유용합니다.

용도명:
真实姓name:
성별:
所属地区：
邮箱：